javascript - jQuery 单击更改外部元素

Question

我有这样的结构:

<div class="summary entry-summary">
  <form>
    <div class="single_variation_wrap">         
      <div class="single_variation">
        <span class="price">
           <span class="amount">200.00грн.</span>
        </span>
        <p class="stock out-of-stock">Нет в наличии</p></div>
      </div>
    </div>
  </form>
  <ul class="variation-select" attr="pa_varnish_color"></ul>
  <ul class="variation-select" attr="pa_type_of_furniture"></ul>
</div>

我需要

click $(".variation-select").last().click(function () { })

改变

  <p class="stock out-of-stock">Нет в наличии</p> 

像这样:

`$("p.stock").prependTo(".single_variation");` 

• 将 p.stock 移至 .single_variation 的第一个元素。我需要在点击时执行此操作，因为首先当页面加载时没有 .single_variation_wrap 它被隐藏。单击最后一个 .variation-select 后，.single_variation_wrap 变为可见。为了更好地理解，我在此处加载有关托管和添加链接的页面。此外，我还添加了屏幕截图以解释我需要做什么。

页面链接:Product page link

Answer 1

一个委托(delegate)的 click 事件处理程序，附加到一个不变的祖先，将执行你所说的，但我不确定你的目标是什么(不是没有更多的 HTML 和代码):

 $(".summary").on("click", ".variation-select:last", function () { })

它通过在事件时间而不是在事件注册时间应用 jQuery 选择器(.variation-select:last)来工作(这就是 click() 所做的)。任何 click 事件冒泡到您的 class="summary" 元素，然后选择器应用于冒泡链中的任何元素，然后您的函数针对任何匹配运行引起事件的因素。在本例中，您的最后一个 variation-select 元素。