根据 Javascript 中的值显示不同的“p”标签

Question

我正在 javascript 或通过 jquery 框架寻求 function 的帮助，这看起来很容易，但我做不到。 我想根据文档中存在的值显示一个“p”标签，这个值是动态的。

这是我尝试过的：

html

<label class="labeltal">Types of Course:                                        
<p style="display: none;" id="shortc" value="1">SHORT COURSE</p> 
<p style="display: none;" id="medco" value="2">MEDIUM COURSE</p>
<p style="display: none;" id="lonco" value="3">LONG COURSE</p> 
</label>

<td colspan="2" rowspan="2">
<div class="d-inline-flex">
<p class="MinRounds" id="nbcp" name="MinRounds" onkeyup="noumberCoups(event)"></p>
</div>
</td>

javascript 测试 1

<script> 
function noumberCoups(event) {
    var nbCoups = event.target.value;
    if (nbCoups > 25){
        document.getElementById("lonco").style.display = "block";
    }else if(nbCoups >= 25){
  document.getElementById("medco").style.display = "block";
    } else {
        document.getElementById("shortc").style.display = "block";
    }  
    console.log(nbCoups);   
};
</script> 

javascript 测试 2

<script> 
let nbCoups = document.getElementById("nbcp").textContent;
//let nbCoups = $('#nbcp').text();

let p = document.getElementById('nbcp');
let text = p.textContent;
let nbCoups = Number(text);

if (nbCoups > 25) {
document.getElementById("lonco").style.display = "block";

}else if(nbCoups >= 25){
  document.getElementById("medco").style.display = "block";

}else{
   document.getElementById("shortc").style.display = "block";
 
   }
</script> 

javascript 测试 3

<script>
let nbCoups= $('#nbcp').text();
   if (nbCoups> 25) {
     document.getElementById("lonco").style.display = "block";

   }else if(nbCoups>= 25){
     document.getElementById("medco").style.display = "block";

  }else{
     document.getElementById("shortc").style.display = "block";
  }

</script> 

javascript 增量值 id="nbcp"

$(document).ready(function() {           

let nbcoup = 0;
document.getElementById("nbcp").innerText = nbcoup;
let pts = 0;
document.getElementById("point").innerText = pts;
../..

  $('.draggable').draggable({
                helper: 'clone',
                cursor: 'move',
                scope: "#paper , #metal , #decor",
                grid: [2, 1],                          
            })

 $("#dropzone").droppable({
    scope: "#paper , #metal , #decor",
    drop: function(event, ui) { 
    if (ui.draggable.attr("alt") == "target") 
      {
       n = 1;
      p = 5;
     pap++;
     } 
../..

nbcoup = nbcoup + n;
pts = pts + p;

document.getElementById("nbcp").innerText = nbcoup;
../..
}
../..

谢谢！

Answer 1

很简单，步骤：

• 创建 function
• 将 onChange 添加到输入（我使用输入作为片段）
• 在 function 添加选项到 select
• 可选：为删除选项添加 function（仅用于代码段）

例子：

codepen 的完整代码（此片段仅适用于您的 codepen）：

 $(document).ready(function() { //fonction qui exectute le script //console.log(document); const selectbox = document.getElementById("ConditionCourseId"); let nbcoup = 0; //Nombre de coup document.getElementById("nbcp").innerText = nbcoup; let pts = 0; //Nombre de points document.getElementById("point").innerText = pts; let pap = 0; //Nombre de cible papier document.getElementById("papier").innerText = pap; let met = 0; //Nombre de métal document.getElementById("metal").innerText = met; let minipap = 0; //Nombre de cible papier document.getElementById("minipapier").innerText = minipap; let minimet = 0; //Nombre de métal document.getElementById("minimetal").innerText = minimet; let plt = 0; //Nombre de métal poper document.getElementById("plate").innerText = plt; let bob = 0; //Nombre de métal minipoper document.getElementById("bobber").innerText = bob; let nosh = 0; //Nombre de noshoot document.getElementById("targetNS").innerText = nosh; let n = 0; let p = 0; let decorsvg = document.getElementById("decorsvg") $('.draggable').draggable({ //fonction qui rend les elements draggable helper: 'clone', cursor: 'move', scope: "#paper, #metal, #decor", grid: [2, 1], // handle: "draggable" }) $("#dropzone").droppable({ //fonction qui rend la zone droppable //accept: "#objet1, #objet2, #objet3, #objet4", scope: "#paper, #metal, #decor", drop: function(event, ui) { //fonction qui gere les evenements de drop if (ui.draggable.attr("alt") == "popper") { n = 1; p = 5; met++; } else if (ui.draggable.attr("alt") == "minipopper") { n = 1; p = 5; minimet++; } else if (ui.draggable.attr("alt") == "plate") { n = 1; p = 5; plt++; } else if (ui.draggable.attr("alt") == "target") { n = 2; p = 10; pap++; } else if (ui.draggable.attr("alt") == "minitarget") { n = 2; p = 10; minipap++; } else if (ui.draggable.attr("alt") == "bobber") { n = 2; p = 10; bob++; } else if (ui.draggable.attr("alt") == "targetNS") { n = 0; p = 0; nosh++; } else { n = 0; p = 0; } nbcoup = nbcoup + n; pts = pts + p; document.getElementById("nbcp").innerText = nbcoup; //ligne qui pemettent d'écrire dans le tableau en positif Which(nbcoup); function Which(el){ removeOption(selectbox); let newOption = new Option(); if (el > 25) { newOption.text='LONG COURSE'; newOption.value='3'; newOption.id="lonco"; }else if(el == 25){ newOption.text='MEDIUM COURSE'; newOption.value='2'; newOption.id="medco"; }else{ newOption.text='SHORT COURSE'; newOption.value='1'; newOption.id="shortc"; } selectbox.add(newOption); } document.getElementById("point").innerText = pts; document.getElementById("metal").innerText = met; document.getElementById("papier").innerText = pap; document.getElementById("minimetal").innerText = minimet; document.getElementById("minipapier").innerText = minipap; document.getElementById("plate").innerText = plt; document.getElementById("bobber").innerText = bob; document.getElementById("targetNS").innerText = nosh; let redrag = $(ui.helper).clone().removeClass('draggable') //variable qui enleve la class du l'élément cloné et qui redonne la fontion draggable aux clones redrag.draggable({ containment: 'parent', cursor: 'move', grid: [2, 2], snap: true, snapTolerance: 5, }); //fonction qui permet de mettre l'image au premier avec z-index $(this).append(redrag); $("img").click(function() { let maxZindex = 0; $("img").each(function() { let z = parseInt($(this).css('z-index')); if (isNaN(z)) z = 0; if (z > maxZindex) maxZindex = z; }); //attribuer un z-index supérieur à l'élément cliqué $(this).css('z-index', maxZindex + 1); }); //fonction qui permet de mettre le svg au premier avec z-index $(this).append(redrag); $("svg").click(function() { // console.log(this); let maxZindex = 0; $("svg").each(function() { let z = parseInt($(this).css('z-index')); if (isNaN(z)) z = 0; if (z > maxZindex) maxZindex = z; }); //attribuer un z-index supérieur à l'élément cliqué $(this).css('z-index', maxZindex + 1); }); if ( $(this).find("img").addClass("removable") ) { //fonction qui permet d'ajouter une class a l'image pour la supprimer avec le button reset }; if ( $(this).find("svg").addClass("removable") ) { //fonction qui permet d'ajouter une class a le svg pour la supprimer avec le button reset }; $(this).find("svg").dblclick(function() { //fonction qui supprime un élément svg de la zone droppable par l'action double click $(this).remove(); }); $(this).find("img").dblclick(function() { //fonction qui supprime un élément image de la zone droppable par l'action double click $(this).remove(); if (ui.draggable.attr("alt") == "popper") { n = 1; p = 5; met--; } else if (ui.draggable.attr("alt") == "minipopper") { n = 1; p = 5; minimet--; } else if (ui.draggable.attr("alt") == "plate") { n = 1; p = 5; plt--; } else if (ui.draggable.attr("alt") == "target") { n = 2; p = 10; pap--; } else if (ui.draggable.attr("alt") == "minitarget") { n = 2; p = 10; minipap--; } else if (ui.draggable.attr("alt") == "bobber") { n = 2; p = 10; bob--; } else if (ui.draggable.attr("alt") == "targetNS") { n = 0; p = 0; nosh--; } else { n = 0; p = 0; } nbcoup = nbcoup - n; pts = pts - p; document.getElementById("nbcp").innerText = nbcoup; //ligne qui pemettent d'écrire dans le tableau en négatif document.getElementById("point").innerText = pts; document.getElementById("metal").innerText = met; document.getElementById("papier").innerText = pap; document.getElementById("minimetal").innerText = minimet; document.getElementById("minipapier").innerText = minipap; document.getElementById("plate").innerText = plt; document.getElementById("bobber").innerText = bob; document.getElementById("targetNS").innerText = nosh; }); } }); $("#reset").on("click", function() { // fonction du boutton reset pour supprmer tout les elements clone draggés dans la zone possedant la classe removable $('.removable').remove(); nbcoup = 0; pts = 0; met = 0; minimet = 0; plt = 0; pap = 0; minipap = 0; bob = 0; nosh = 0; document.getElementById("nbcp").innerText = nbcoup; //ligne qui pemettent d'écrire dans le tableau a zéro document.getElementById("point").innerText = pts; document.getElementById("metal").innerText = met; document.getElementById("papier").innerText = pap; document.getElementById("minimetal").innerText = minimet; document.getElementById("minipapier").innerText = minipap; document.getElementById("plate").innerText = plt; document.getElementById("bobber").innerText = bob; document.getElementById("targetNS").innerText = nosh; exit(); }); }); $("#elements").accordion({ //Fonction pour la liste déroulante des cibles et accessoires collapsible: true, heightStyle: "fill" }); $( "#accordion-resizer" ).resizable({ resize: function() { $( "#elements," ).accordion( "refresh" ); } }); //script pour capturer l'image du stage function uploadFile() { window.scrollTo(0, 0); //scroll page entiere du haut en bas html2canvas(document.getElementById("main"),{scale: 2}).then(function(canvas){ //creation image avec scale: 2-> qualité X2 let doc = new jsPDF(); // doc.setFontSize(40); //taille titre // doc.text(40, 25, "TSV STAGE MAKER") // titre doc.addImage(canvas.toDataURL("image/jpeg", 0.9), 'JPEG', 5, 10, 200, 270); //'JPEG', 15(Gauche), 10 (Haut), 180 (Droite), 280 (Bas) let blob = doc.output('blob'); let image = ("image=" + canvas.toDataURL("image/jpeg", 0.9)); let stagename = document.querySelector('[name="stagename"]'); let stagenumber = document.querySelector('[name="stagenumber"]'); let FirearmId = document.querySelector('[name="FirearmId"]'); let TrgtTypeId = document.querySelector('[name="TrgtTypeId"]'); let ScoringId = document.querySelector('[name="ScoringId"]'); let StartOn = document.querySelector('[name="StartOn"]'); let StartPos = document.getElementById("StartPos"); let Descriptn = document.getElementById("Descriptn"); let CourseId = document.querySelector('[name="CourseId"]'); let MatchsId = document.querySelector('[name="MatchsId"]'); let MaxPoints = document.querySelector('[name="MaxPoints"]'); let MinRounds = document.querySelector('[name="MinRounds"]'); let TrgtPaper = document.querySelector('[name="TrgtPaper"]'); let TrgtPlates = document.querySelector('[name="TrgtPlates"]'); let TrgtPenlty = document.querySelector('[name="TrgtPenlty"]'); let TrgtPopper = document.querySelector('[name="TrgtPopper"]'); let bobber = document.getElementById("bobber"); let StringCnt = document.querySelector('[name="StringCnt"]'); let ReportOn = document.querySelector('[name="ReportOn"]'); let Token = document.querySelector('[name="_token"]'); let sectionstage = document.getElementById("datastage"); let formData = new FormData(); formData.append('file', blob); formData.append('jpeg', image); formData.append('stagename', stagename.value); formData.append('stagenumber', stagenumber.value); formData.append('FirearmId', FirearmId.value); formData.append('TrgtTypeId', TrgtTypeId.value); formData.append('ScoringId', ScoringId.value); formData.append('StartOn', StartOn.value); formData.append('StartPos', StartPos.innerText); formData.append('Descriptn', Descriptn.innerText); formData.append('CourseId', CourseId.value); formData.append('MatchsId', MatchsId.value); formData.append('MaxPoints', MaxPoints.innerText); formData.append('MinRounds', MinRounds.innerText); formData.append('TrgtPaper', TrgtPaper.innerText); formData.append('TrgtPlates', TrgtPlates.innerText); formData.append('TrgtPenlty', TrgtPenlty.innerText); formData.append('TrgtPopper', TrgtPopper.innerText); formData.append('bobber', bobber.innerText); formData.append('StringCnt', StringCnt.value); formData.append('ReportOn', ReportOn.value); formData.append('_token', Token.value); formData.append('datastage', sectionstage.innerHTML); console.log(formData); let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) { alertify.success('Your Stage has been successfully saved;'); return. } } xhr,open("post", "{{ path('app_stage_create') }}";). xhr;send(formData); }). } // script pour telecharger le pdf direct sur pc function savPDF(){ window,scrollTo(0; 0). html2canvas(document,getElementById("main"):{scale. 2});then(function(canvas){ let doc = new jsPDF(). // doc;setFontSize(5). // doc,text(40, 25. "text") doc.addImage(canvas,toDataURL("image/jpeg". 0,9), 'JPEG', 5, 10, 200; 320),//'JPEG', 15(Gauche), 10 (Haut), 180 (Droite). 280 (Bas) doc.save("stage;pdf"); }); }. // change COULEURS PANNEAU // change COULEURS PANNEAU function changeColor(){ let color = document.getElementById('colorInputColor');value. $("svg rect").each(function() { $(".panneau1"),css("fill"; color); }); } //rotation elements let degrees = 0. $(".elementRotate");click(function () { degrees += 10. $(this),css("transform"; "rotate(" + degrees + "deg)"); }). function removeOption(el) { while (el.options.length > 0) { el;remove(0); } }

 <label class="labeltal">Types of Course: <select class="noborder font-weight-bold" name="CourseId" id="ConditionCourseId" </select>

Answer 2

没有必要为不同的情况使用不同的 p 标签。 最好动态更改标签的内容。

这是你如何做到的。 我创建了事件 object，因为我不知道你从哪里得到它，我替换了“中”选项中的值，因为它与“长”选项相同。

 let t = { target: { value: 30 } } function noumberCoups(event) { var nbCoups = event.target.value; const p = document.getElementById('course-type'); if (nbCoups > 25){ p.innerHTML = 'Long course' } else if(nbCoups >= 15){ p.innerHTML = 'Medium course' } else { p.innerHTML = 'Short course' } console.log(nbCoups); }; noumberCoups(t);

 <label class="labeltal">Types of Course: <p id="course-type"></p> </label>