Question

我有HTML：

  <h3 class="toggle_div">
        <i class="left-image switch-icon"></i>
  </h3>

我想点击div时更改类名。在这种情况下， left-image 应更改为类名右图像。

这是jQuery我有：

$('.toggle-div').click(function(){
     $(this).siblings().next('.switch-icon').toggleClass("left-image right-image");
});

我尝试了这个，因为只有将<i>元素放在我想要用来切换的div元素下面时，代码才有效。所以看起来我无法获得div元素中元素的类名。

$('.toggle-div').click(function(){
     $(this).next('.switch-icon').toggleClass("left-image right-image");
});

我可以使用什么来使它工作？

JSFiddle ：http://jsfiddle.net/f72FY/69/

Answer 1

首先，你的类名在JS中是错误的。然后你不需要$（this）.siblings（）。next

试试这个

$('.toggle_div').click(function(){
     $('.switch-icon').toggleClass("left-image right-image");
});

Answer 2

您可以使用.switch-icon在单击的元素中查找$('.toggle_div').click(function(){ $(this).find('.switch-icon').toggleClass("left-image right-image"); });

.left-image
{
 background-image: url('http://i.stack.imgur.com/euD9p.png');
    width:20px;
    height:20px;
    background-repeat: no-repeat;
   
}
.right-image
{
 background-image: url('http://i.stack.imgur.com/dzs9m.png');
     width:20px;
    height:20px;
    background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <h3 class="toggle_div">
      Clicking on this text should toggle
      		<div class="left-image switch-icon"></div>
      </h3>

String call = "/webapp/city/1"; 
String pathInfo = "/1";


    if (call.equals("/webapp/city/*")) { //checking (doesn't work)
            String[] pathParts = pathInfo.split("/");
            int id = pathParts[1];  //desired result : 1
            (...)
    } else if (...)

Answer 3

您可以在方法中使用.children或.find。那应该能够根据选择器检索完整的元素细节。

Answer 4

试试此代码

$('.toggle_div').click(function(){
                  $('div.switch-icon').toggleClass("left-image right-image");
    });

如何在同一个div中定位next（）

4 个答案: