Question

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

目标：当用户在输入框中更改夜晚的值时，总价格会发生变化（仅针对该特定输入）。目前，所有课程都在同时改变。我相信.find或.closest是诀窍，但我不确定如何实现。这里是.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>

Answer 1

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

问题措辞的方式是给出答案的人需要解释它。这是我的解释。我假设有多个旅行团。当您更改一个游览时，它会更改所有“.nights-total”和“.cashtotal”类。解决此问题的方法是使用选择器的上下文。在这种情况下，它是一个容器，它是每个“.nights-total”和“.cashtotal”类的上下文。如果我做出了错误的假设，请更清楚地更新您的问题。希望这会有所帮助。

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

1 个答案: