Jquery добавить конкатенацию по клику

Question

Я пытаюсь передать две переменные, одна из которых имеет целое число, а другая имеет некоторую строку, скажем, я хочу передать идентификатор, имя

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

В приведенном выше коде в функции onclick, если я передаю только идентификатор <div class='redstatus' onclick='redStatus("+Id+")'><span class='countspan''>"+red_count+"</span></div> все работает нормально.

Я хочу отправить еще одно имя параметра вместе с идентификатором, разделенным запятой

<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 );

            }
}

Я добавил код для вашей справки

Answer 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 и добавьте прослушиватель для каждого:

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 - без кавычек требуется экранирование!)

Убедитесь, что LOBId s и LOBNameRef s не переназначаются в других итерациях l oop - объявите их с помощью const, например:

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

, поэтому они ограничены блоком, а не функцией.

(Вероятно, было бы хорошо иметь только одну <color>Status функцию, а не три отдельные автономные функции (которые вероятно, все делают что-то похожее) - слишком много повторений следует избегать)

Answer 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>