J'ai utilisé jquery pour ajouter du contenu html avec la fonction onclick de jquery, mais mon contenu ne s'affiche pas correctement, veuillez m'aider à résoudre ce problème.

Mon code est

 $.each(_fileName, function (i, item) {
                imgTag += "<div class='DivColumn-6'>";
                imgTag += "<img src=" + _ImgPath + "Icons/" + _fileName[i]['SenIcon'] + ".jpg class='imgSenIcons'/>";

                imgTag += "<span class='spnSensorName' onclick=calSensorPage('" + _fileName[i]['SenFnCal'];
                imgTag += "','" + _fileName[i]['SensorNmtxt'];
                imgTag += ");>" + _fileName[i]['SensorNmtxt'];
                imgTag += "</span></div>";
            });

            $("#divSensorMnu").append(imgTag);

Le rendu est comme ceci:

<span class="spnSensorName" onclick="calSensorPage('CamshaftPosition','CAMSHAFT" position="" sensor);="">CAMSHAFT POSITION SENSOR</span>

enter image description here

J'ai besoin d'une sortie comme celle-ci.

 <span class="spnSensorName" onclick="calSensorPage('CamshaftPosition','CAMSHAFT position sensor')">CAMSHAFT POSITION SENSOR</span>

Je connais des citations manquantes. s'il vous plaît aidez-moi à réparer.

Désolé pour mon anglais.

Merci

-1
Sathishkumar 13 avril 2018 à 11:30

3 réponses

Meilleure réponse

Le problème est dû à votre utilisation de guillemets mal assortis et non échappés dans la chaîne span que vous générez. Essaye ça:

var _fileName = [{
  "Sno": 1,
  "SensorNmtxt": "RAIL PRESSURE SENSOR",
  "SenFnCal": "RailPressure",
  "SenIcon": 1
}];

var imgTag = '', _ImgPath = "/";

$.each(_fileName, function(i, item) {
  imgTag += "<div class='DivColumn-6'>";
  imgTag += "<img src=" + _ImgPath + "Icons/" + _fileName[i]['SenIcon'] + ".jpg class='imgSenIcons'/>";
  
  imgTag += '<span class="spnSensorName" onclick="calSensorPage(\'' + _fileName[i]['SenFnCal'];
  imgTag += '\',\'' + _fileName[i]['SensorNmtxt'];
  imgTag += '\')";>' + _fileName[i]['SensorNmtxt'];
  imgTag += '</span></div>';
});

$("#divSensorMnu").append(imgTag);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divSensorMnu"></div>

Cependant, vous devez noter que l'utilisation d'attributs d'événement on* est une approche très dépassée et rend le code HTML et le code JS associé un gâchis avec lequel travailler - comme vous pouvez le voir dans le cauchemar de concaténation ci-dessus.

Une bien meilleure solution consiste à stocker les métadonnées requises dans l'élément à l'aide d'attributs data et à ajouter un gestionnaire d'événements discret, quelque chose comme ceci:

var _fileName = [{
  "Sno": 1,
  "SensorNmtxt": "RAIL PRESSURE SENSOR",
  "SenFnCal": "RailPressure",
  "SenIcon": 1
}]
var _ImgPath = "/";

var html = _fileName.map(function(item) {
  return `<div class="DivColumn-6"><img src="${_ImgPath}Icons/${item.SenIcon}.jpg class="imgSenIcons"/><span class="spnSensorName" data-fncal="${item.SenFnCal}">${item.SensorNmtxt}</span></div>`;
});
$("#divSensorMnu").append(html);

$('.spnSensorName').click(function() {
  var $el = $(this)
  var fncal = $el.data('fncal');
  var nmtxt = $el.text();
  console.log(fncal, nmtxt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divSensorMnu"></div>
1
Rory McCrossan 13 avril 2018 à 09:07

Salut, voici votre js corrigé, il vous manque un 'ici je l'ai ajouté, parce que vous le manquiez, il n'a pas terminé la balise onclick:

   imtTag += '<span class="spnSensorName" onclick="calSensorPage(\'' + _fileName[i]['SenFnCal'];
   imgTag += '\',\'' + _fileName[i]['SensorNmtxt'];
   imgTag += '\');">' + _fileName[i]['SensorNmtxt'];
   imgTag += '</span></div>';

Changez simplement tout ce que vous doublez les guillemets par simple et ajoutez "" pour la méthode onclick

0
Lucas Tambarin 13 avril 2018 à 08:56

Essaye ça

démo : https://codepen.io/anon/pen/XEwzaN

var SensorNmtxt = "CAMSHAF position sensor";
var SenFnCal = "CamshaftPosition";


var  imgTag = "<div class='DivColumn-6'>";
imgTag += '<img src=123Icons/123.jpg class="imgSenIcons"/>';
imgTag += '<span class="spnSensorName" onclick="calSensorPage(\'' + SenFnCal + '\',\'' + SensorNmtxt + '\')">' + SensorNmtxt;
imgTag += '</span></div>';

$("#divSensorMnu").append(imgTag);
console.log(imgTag)


function calSensorPage (){
  console.log("hi")
}
1
Mars.Tsai 13 avril 2018 à 09:04