点击<li>

Question

我正在尝试在li项目中获取最接近的DIV，以应用新类：

  <ul id="menu">
    <li class="here">
      <img src="image">
      <div class="border selected"></div>
    </li>
    <li class="here">
      <img src="image">
      <div class="border"></div>
    </li>
                            .....

我希望能够在li标签内点击并将“已选择”类应用于已经具有类边框的div。

我试图使用.closest和.find但是我无法获得好结果。 有什么建议吗？谢谢！

编辑：https://jsfiddle.net/a8pm1aj7/

Answer 1

请查看此jsfiddle。

相关代码是：

$("#menu li").on("click", function(){
  $("#menu li div.border").removeClass("selected");
  $(this).find("div.border").addClass("selected");
});

此代码从以前选择的所有元素中删除.selected类。

如果我理解你的问题，这应该适合你。

Answer 2

.children()似乎工作正常....你可能有更多的CSS层次结构问题。确保在 CSS中的selected类之后定义了border类。

$(document).ready(function() {
  
  $( '.here' ).on('click', function() {
      var theDiv = $(this).children('.border');
      $('.border').not(theDiv).removeClass('selected');
     $( theDiv ).toggleClass('selected');
  });
  
  
  });

li { display: block; margin: 10px; width: 80%; }

.border { height: 20px; background: #eee; }
.selected { background: #fee; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <ul id="menu">
        <li class="here">
          Text/image
          <div class="border"></div>
        </li>
        <li class="here">
          Text/image
          <div class="border"></div>
        </li>
      </ul>

更新了fiddle和已解决的问题。 - 您将div定位为绝对值，并设置为100％宽度和100％高度。 S0基本上是窗口的大小。实际上将jQuery库链接到了小提琴。