JQuery事件方法影响类的一个元素

JQuery Event Method To Affect One Element of A Class

本文关键字：一个 元素 事件 方法 影响 JQuery      更新时间：2023-09-26

我似乎不能分离出一个事件方法来影响一个更大的类中的一个特定元素。

目标:当用户更改输入框中天数的值时，总价格会发生变化(仅针对该特定输入)。目前，所有的类都在同时改变。我相信。find或。nearest是窍门，但我不确定如何实现。.js.

  //nights auto multiply price
$(".cashtotal").prepend("$");
$('.nights').on('keyup change', function() {
var nights = +$(this).val();
var dailyPrice = +$(this).closest(".tour").data("daily-price");
$(".cashtotal").text(nights * dailyPrice);
$(".nights-total").text(nights);
$(".cashtotal").prepend("$");
});

和html

中的一个例子
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="100">
                    <h2 class="title">Idlehour, Angeles National Forest</h2>
                    <div class="info">
                        <div class="description">A pleasant trail through red fir forest with access to different
                            lake basins and the Yosemite Creek watershed.</div> 
                            <div class="nightsnum">
                                <p>
                                    <label for="nights">Number of Nights</label>
                                </p>
                                <p>
                                    <input type="number" value="3" class="nights">
                                </p>
                            </div>
                            <div class="total">
                            <p><span class="cashtotal">400</span><br> for <span class="nights-count">3</span> Nights</p>
                            </div>
                        </div>    


//nights auto multiply price
$(".cashtotal").prepend("$");
$('.nights').on('keyup change', function() {
  
  var $thisTour = $(this).closest(".tour");
  var nights = $(this).val();
  var dailyPrice = $thisTour.data("daily-price");
  $(".cashtotal", $thisTour).text("$" + nights * dailyPrice);
  $(".nights-total", $thisTour).text(nights);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I can't seem to separate out an event method to effect just one specific element within a larger class.
Goal: When user changes value in input box for number of nights, the total price changes (only for that specific input). Currently, all classes are being altered simultaneously. I believe .find or .closest is the trick, but am unsure how to implement. here's the .js. -->
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="100">
  <h2 class="title">Idlehour, Angeles National Forest</h2>
  <div class="info">
    <div class="description">A pleasant trail through red fir forest with access to different lake basins and the Yosemite Creek watershed.</div>
    <div class="nightsnum">
      <p>
        <label for="nights">Number of Nights</label>
      </p>
      <p>
        <input type="number" value="1" class="nights">
      </p>
    </div>
    <div class="total">
      <p><span class="cashtotal">100</span>
        <br>for <span class="nights-total">1</span> Nights</p>
    </div>
  </div>
</div>
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="200">
  <h2 class="title">Another forest</h2>
  <div class="info">
    <div class="description">another tour.</div>
    <div class="nightsnum">
      <p>
        <label for="nights">Number of Nights</label>
      </p>
      <p>
        <input type="number" value="1" class="nights">
      </p>
    </div>
    <div class="total">
      <p><span class="cashtotal">200</span>
        <br>for <span class="nights-total">1</span> Nights</p>
    </div>
  </div>
</div>

这个问题的措辞需要给出答案的人来解释。这是我的解释。我假设有多次旅行。当你改变一个行程时，它会改变所有的行程。晚上-总"answers"。cashtotal"类。要解决这个问题，你可以为选择器使用一个上下文。在这种情况下，旅行是容器，是每个容器的上下文。晚上-总"answers"。cashtotal"类。如果我做了错误的假设，请以更清晰的意思更新你的问题。

相关文章：