jQuery 仅在特定选择器中隐藏项目

Question

我有以下 html:

<li>
 <select class="variation">
  <option value="1">1</option>
  <option value="2">2</option>
 </select>
 <p class="price"></p>
</li>

这是重复多次（产品列表）。

默认情况下，第一个选项的价格显示在下拉列表旁边，工作正常，当我更改 select 时，它应该将价格更改为 selected 选项的价格，这有效很好，但它不仅隐藏了该产品的其他价格，它还隐藏了每个产品的价格。

我的 JS：

$(".build-box-list li").each(function() {
 $(".variation", this).on("change", function() {
  $(".price").hide();
  $("#" + this.value).show();
 });
});

如何只隐藏特定产品 li 的价格而不是每个产品的价格，我试过 $(".price", this).hide(); 但没有成功。

谢谢

Answer 1

根据提供的code/html，问题是这一行：

$(".price").hide();

没有任何上下文，因此适用于所有 .price 个元素。

it hides it for every product

事件在 .variation 上进行，因此要获取相关的 .price 您可以使用多种方法，我的偏好是先到父级然后再返回（您也可以使用 .siblings 和 .nextAll（如果你胆大的话，可以使用事件 .next）如果你的 html 将来不太可能改变（它可能会......）） .

$(".build-box-list li").each(function() {
 $(".variation", this).on("change", function() {
  $(this).closest("li").find(".price").hide();
  $("#" + this.value).show();
 });
});

另外，您可以删除循环：

$(".build-box-list li .varation").on("change", function() {
  $(this).closest("li").find(".price").hide();
  $("#" + this.value).show();
});

有关更多选项/原因，请参阅。

jQuery 仅在特定选择器中隐藏项目

jQuery hide item ony in a certain selector

each

jquery