怎樣的next（）在同一div

目標我有這個HTML：怎樣的next（）在同一div

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

我想改變的類名，當我點擊div。在這種情況下，左圖應更改爲類名右圖。

這是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/所有的類名

來源

2017-11-11 Siyah

類的名字是錯的JavaScript。它的toggle_div不是toggle-div –

'.switch-icon'不是'toggle_div'的兄弟 - 它是一個子元素。 '$（this）.find（「。switch-icon」）' –

http://jsfiddle.net/f72FY/70/ –

您可以使用.find()到被點擊的元素中找到.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 
 
     \t \t <div class="left-image switch-icon"></div> 
 
     </h3>

來源

2017-11-11 10:23:37 C2486

首先是錯誤的JS。然後你不需要$（本）.siblings（）。接下來

剛剛嘗試這一點

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

來源

2017-11-11 10:23:15

謝謝！現在明白了。 – Siyah

在20分鐘的時間內，OP提出了一個新問題：我單擊一個div，它會更改所有的開關圖標，我如何才能使其更改爲一個... –

您可以在方法中使用.children或.find with。這應該能夠根據選擇器檢索完整的元素細節。

來源

2017-11-11 10:23:45 VGupta

試試這個代碼

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

來源

2017-11-11 10:32:23

怎樣的next（）在同一div

回答

相關問題