Jquery追加连接onclick答案

【问题标题】：Jquery append Concatenation onclickJquery追加连接onclick
【发布时间】：2020-05-24 07:38:16
【问题描述】：

我正在尝试传递两个变量，一个是整数，另一个是字符串，比如说我想传递 id,name

<div class='redstatus' onclick='redStatus("+Id+","+name+")'><span class='countspan''>"+red_count+"</span></div>

在 onclick 函数的上述代码中，如果我只传递 id <div class='redstatus' onclick='redStatus("+Id+")'><span class='countspan''>"+red_count+"</span></div> 它工作正常。

我想再发送一个参数名称以及用逗号分隔的 id

<div class='redstatus' onclick='redStatus("+Id+","+name+")'><span class='countspan''>"+red_count+"</span></div>

它不工作。我需要帮助。

for(var i in appData ){
    console.log("Data"+JSON.stringify(appData));
    for(j in appData.LOB){

        var LOBId = appData.LOB[j].LOBID;
        LOBName = appData.LOB[j].LOBName;
        var LOBRef = appData.LOB[j].LOBRef;
        var LOBNameRef = appData.LOB[j].LOBNameRef;
        //console.log("LOBId"+LOBId+"LOBName"+LOBName);

        $(".left_div").append("<div class='left_lob_name'>"+LOBName+"</div>");
        streamInRed = [];
        streamInAmber = [];
        streamInGreen = [];
        currentItemRed = [LOBId];
        currentItemAmber = [LOBId];
        currentItemGreen = [LOBId];

        //$("."+LOBNameRef+"").append("<div id="+LOBId+" style='height:74vh;overflow-y:auto;'><table class='table table-bordered' ><thead><tr><th>StreamName</th><th>BusinessSLA Description</th><th>Status</th><th>Business SLA</th><th>Forecast Completion Time</th><th>Actual Completion Time</th><th>JobName</th></tr></thead><tbody class='"+LOBRef+"'></tbody></table></div>");
        for(var k in appData.LOB[j].Streams.Stream){
            //console.log("Streams"+JSON.stringify(appData.LOB[j].Streams.Stream));
            var streamId = appData.LOB[j].Streams.Stream[k].streamId;
            var streamName = appData.LOB[j].Streams.Stream[k].streamName;
            var Status = appData.LOB[j].Streams.Stream[k].Status;
            var jobName = appData.LOB[j].Streams.Stream[k].JobName;
            var BSD= appData.LOB[j].Streams.Stream[k].BusinessSLADescrition;
            var BSLA = appData.LOB[j].Streams.Stream[k].BusinessSLA;
            var FCT = appData.LOB[j].Streams.Stream[k].ForecastCompletionTime;
            var ACT = appData.LOB[j].Streams.Stream[k].ActualCompletionTime;
            var RAGStatus = appData.LOB[j].Streams.Stream[k].RAGStatus;
            if(Status == "red"){
                //$("."+LOBName+"").append("<div class='streamcolor_red test' data-name='1'>"+streamName+"</div>");
                //$("."+LOBRef+"").append("<tr  class='test' data-name='1'><td style='background-color:#f3180d;color:#fff;'>"+streamName+"</td><td>"+BSD+"</td><td>"+RAGStatus+"</td><td>"+BSLA+"</td><td>"+FCT+"</td><td>"+ACT+"</td><td>"+jobName+"</td></tr>");
                red_count = red_count+1;
                currentItemRed = [streamName,BSD,RAGStatus,BSLA,FCT,ACT,jobName];
                streamInRed.push(currentItemRed);
                //redStatus();
                //console.log("streamInRed"+streamInRed);
            }else if(Status == "amber"){
                //$("."+LOBRef+"").append("<tr  class='test' data-name='2'><td style='background-color:rgba(243, 168, 15, 0.9215686274509803);color:#fff;'>"+streamName+"</td><td>"+BSD+"</td><td>"+RAGStatus+"</td><td>"+BSLA+"</td><td>"+FCT+"</td><td>"+ACT+"</td><td>"+jobName+"</td></tr>");
                //$("."+LOBName+"").append("<div class='streamcolor_amber test' data-name='2'>"+streamName+"</div>");
                amber_count = amber_count+1;
                currentItemAmber = [streamName,BSD,RAGStatus,BSLA,FCT,ACT,jobName];
                streamInAmber.push(currentItemAmber);
            }else {
                //$("."+LOBRef+"").append("<tr  class='test' data-name='3'><td style='background-color:green;color:#fff;'>"+streamName+"</td><td>"+BSD+"</td><td>"+RAGStatus+"</td><td>"+BSLA+"</td><td>"+FCT+"</td><td>"+ACT+"</td><td>"+jobName+"</td></tr>");
                //$("."+LOBName+"").append("<div class='streamcolor_green test' data-name='3'>"+streamName+"</div>");
                green_count = green_count+1;
                currentItemGreen=[streamName,BSD,RAGStatus,BSLA,FCT,ACT,jobName];
                streamInGreen.push(currentItemGreen);
            }
            //console.log("streamId"+streamId+"streamName"+streamName+"Status"+Status);
        }
        console.log("LOBId",LOBId);
        console.log("sep_symbol",sep_symbol);
        console.log("syb",syb);
        console.log("LOBNameRef",LOBNameRef);
        var tempvar = "'"+LOBNameRef+"'";
        console.log("tempvar"+LOBId +sep_symbol +tempvar);
        $("<div style='text-align:center;height:5vh;margin:2vw;'> <div class='redstatus' onclick='redStatus("+LOBId+","+LOBNameRef+")'><span class='countspan''>"+red_count+"</span></div> <div class='amberstatus' onclick='amberStatus("+LOBId+")'><span class='countspan'>"+amber_count+"</span></div> <div class='greenstatus' onclick='greenStatus("+LOBId+")'><span class='countspan'>"+green_count+"</span></div></div>").appendTo(".right_div");
        red_count = 0;
        amber_count = 0;
        green_count = 0;
        //var Streams = appData.LOB[j].Streams;
        //console.log("Before"+$wrapper);
        //var $wrapper = $('.'+LOBRef+'');
        //console.log("after"+$wrapper);
        //$wrapper.find('.test').sort(function (a, b) {
        /// return +a.dataset.name - +b.dataset.name;
        //})
        //.appendTo( $wrapper );

            }
}

我已添加代码供您参考

【问题讨论】：

优于avoid inline handlers completely - 所需的转义是无稽之谈，由于范围界定不当，您引用的所有内容都必须是全局的。改为使用 Javascript 正确添加侦听器
实际上它在一个 for 循环中，并且每次更改 Id 和名称时。
无论是否在 for 循环中，仍然使用内联处理程序是个坏主意
这个 div 行在 .append 里面，所以我们只需要使用 inlinehandler 对吗？如果没有，请帮助我。我不知道。
请为minimal reproducible example 发布足够的代码，包括循环和.append 行 - 目前问题中没有足够的信息可以说

标签： javascript jquery append

【解决方案1】：

问题出在线路上

$("<div style='text-align:center;height:5vh;margin:2vw;'> <div class='redstatus' onclick='redStatus("+LOBId+","+LOBNameRef+")'><span class='countspan''>"+red_count+"</span></div> <div class='amberstatus' onclick='amberStatus("+LOBId+")'><span class='countspan'>"+amber_count+"</span></div> <div class='greenstatus' onclick='greenStatus("+LOBId+")'><span class='countspan'>"+green_count+"</span></div></div>").appendTo(".right_div");

更漂亮，并且没有内联处理程序，可以这样构造：

const htmlStr = `
<div style='text-align:center;height:5vh;margin:2vw;'>
  <div class='redstatus'><span class='countspan'>${red_count}</span></div>
  <div class='amberstatus'><span class='countspan'>${amber_count}</span></div>
  <div class='greenstatus'><span class='countspan'>${green_count}</span></div>
</div>
`;

您可以将 HTML 字符串传递给 jQuery 以获取 jQuery 集合，然后选择内部 div 并为每个 div 添加一个侦听器：

const $row = $(htmlStr);
$row.find('.redstatus').on('click', () => redStatus(LOBId, LOBNameRef));
$row.find('.amberstatus').on('click', () => amberStatus(LOBId, LOBNameRef));
$row.find('.greenstatus').on('click', () => greenStatus(LOBId, LOBNameRef));
$row.appendTo(".right_div");

（或将您想要的任何参数传递给status 函数 - 无需转义引号！）

确保 LOBIds 和 LOBNameRefs 不会在循环的其他迭代中重新分配自己 - 使用 const 声明它们，例如：

const LOBId = appData.LOB[j].LOBID;
const LOBName = appData.LOB[j].LOBName;
const LOBRef = appData.LOB[j].LOBRef;

所以它们的作用域是块，而不是函数。

（最好只有一个 <color>Status 函数，而不是三个独立的独立函数（它们可能都做一些类似的事情）——应该避免过多的重复）

【讨论】：

【解决方案2】：

你想连接两个参数传递给一个函数，不要用单引号或双引号将变量括起来，应该是：onclick="redStatus(Id,name)"

function redStatus(Id,name){
 var result = Id+'_'+name;
 document.getElementsByClassName('countspan')[0].innerText = result;
}

<!DOCTYPE html>
<html>
<head>
	<title>Append Two Params</title>
	
</head>
<body>
<div onclick="redStatus(1,'name')">Append Two Params</div>
<span class='countspan'></span>
</body>

</html>

【讨论】：