Question

我需要了解（这）是如何工作的。我已经看到了许多使用它的不同情况和实例，但使用的方式不同。我想只针对具有类名的几个div。我似乎无法使其正常工作。我在Stackoverflow中读过几个答案，但似乎仍然无法使用（this）定位一个类。再次感谢帮助我。

js

<script type="text/javascript">
  jQuery(document).ready(function(){
     jQuery('.expandCollapseMenu').click(function(){
      jQuery(this).parent().find('.menu_product_main_container').slideToggle();
    });
  });
</script>

html

<div class="menu_category_category">
    <h3 class="basic_catolog">Beverages</h3>        
    <div class="toggle_menu">
        <img alt="" style="border: 0px none;" src="/images/icons/collapse_menu_icon_on.png" class="expandCollapseMenu {src: '/images/icons/expand_menu_icon.png'}" />
    </div>
</div>
<div class="menu_product_main_container">
    <p>Menu Item 1</p>
    <p>Menu Item 2</p>
</div>
<div class="menu_category_category">
    <h3 class="basic_catolog">Lunch</h3>
    <div class="toggle_menu">
    <img alt="" style="border: 0px none;" src="/images/icons/collapse_menu_icon_on.png" class="expandCollapseMenu {src: '/images/icons/expand_menu_icon.png'}" />
    </div>
</div>
<div class="menu_product_main_container">
    <p>Lunch Item 1</p>
    <p>Lunch Item 2</p>
</div>

Answer 1

this的值取决于代码所在的上下文。

在事件处理程序的上下文中（例如传递给.click()的函数），this将引用触发事件的元素（否则称为事件目标）。

在迭代函数的上下文中，例如.each()，this将引用迭代的当前元素。

Answer 2

错过了一个.parent()

使用此行

jQuery(this).parent().find('.menu_product_main_container').slideToggle();即可获得<div class="toggle_menu">

所以解决方案是jQuery(this).parent().parent().find('.menu_product_main_container').slideToggle();

编辑：

好的缩进我们看到了更好的问题。一个解决方案可以放一个像这样的新div

<div>
  <div class="menu_category_category">
    <h3 class="basic_catolog">Beverages</h3>        
    <div class="toggle_menu">
        <img alt="" style="border: 0px none;" src="/images/icons/collapse_menu_icon_on.png" class="expandCollapseMenu {src: '/images/icons/expand_menu_icon.png'}" />
    </div>
  </div>
  <div class="menu_product_main_container">
    <p>Menu Item 1</p>
    <p>Menu Item 2</p>
   </div>
</div>

如果不更改DOM，我对您的问题不再了解。

如何使用（This）使用slideToggle JQuery来定位类？

2 个答案: