jquery 输入字段和跨度相同的值

i5desfxk  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(94)

我试图使<span></span><input>的值相同,但我卡住了,代码显示不同的值

function manageSubmitState(){
...
...       

                $("#ecalls").val(calls);
                $("#jobs").val(jobs);
                let _p = Number($("#ppj").val());
                let ROI =  _p * jobs;
                $("#roiVal").html(ROI);
                $(".roi").addClass("visibility");
                $("#calculateBtn").addClass("disableBtn");

                setContentVal(budget, clicks, calls, jobs, _p, ROI);
         });
         $("#ppj, #budget").keyup(function(){
               if($("#ppj").val() == "" || $("#budget").val() == ""){
                   // alert("Button should be dicusbked ")
                    $("#calculateBtn").addClass("disableBtn");
                    
               }
               else{
                $("#calculateBtn").removeClass("disableBtn");
               }
           });

           function setContentVal(_budget, _calls, _jobs, _ppj, _ROI){

            $(".estJobs").text(_jobs);
            $("#ppjTxt").text("$"+_ppj);
            $(".roiTxt").text("$"+_ROI);
            
           }
       })

网址:

<input id="jobs" type="number" disabled="" value="0">
<span class="highlight estJobs" id="estJobs">00</span>

这是计算器,在得到输入值后,例如。跨度为2,显示为1

<p>*Now, lets do the math. <span class="highlight estJobs" id="estJobs">3</span> customers times <span class="highlight " id="ppjTxt">$120</span> per job, that makes <span class="highlight roiTxt" id="roiTxt">$120</span> </p>

在roiTxt中,它应该显示estJobs * ppjTxt

bvjveswy

bvjveswy1#

如果希望span在编辑input时与输入匹配,请使用input事件。
disabled是一个布尔属性。仅仅存在就会导致元素被禁用,没有值与之关联,所以当你写:

disabled=""

你实际上是在禁用元素。

$("#jobs").on("input", function(event){
  $(".estJobs").text(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="jobs" type="number" value="0">
<span class="highlight estJobs" id="estJobs">00</span>

相关问题