的jQuery：當前元素

我想在我的李element.I添加類要上單擊添加類上添加類。當我點擊按鈕時在當前li上添加css類。就像我第一次點擊那麼它第一次活躍。第二點擊之後它在第二李活躍，的jQuery：當前元素

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     $("li:first").addClass("intro"); 
    }); 
}); 
</script> 
<style> 
.intro { 
    font-size: 150%; 
    color: red; 
} 
</style> 
</head> 
<body> 

<h1>This is a heading</h1> 

<li>This is a heading</li> 
<li>This is a heading</li> 
<li>This is a heading</li> 
<li>This is a heading</li> 
<li>This is a heading</li> 
<li>This is a heading</li> 
<li>This is a heading</li> 
<li>This is a heading</li> 


<button>Add a class name to the first p element</button> 

</body> 
</html>

來源

2017-05-06 sanjay

幾乎所有可能的重複 – mayersdesign

什麼應該是您的'active'元素？我看不到'.active'或任何代碼 –

單擊按鈕10次會發生什麼？ –

計數的單擊事件並用。而eq()長度li是8後7 REA。所以應用條件適用CH，計數重置爲0

var c = 0; 
 
$(document).ready(function() { 
 
    $("button").click(function() { 
 
    if (c > 7) { 
 
     c = 0; 
 
    } 
 
    $("li").removeClass('intro') 
 
    $("li").eq(c).addClass("intro"); 
 
    c++; 
 

 
    }); 
 
});

.intro { 
 
    font-size: 150%; 
 
    color: red; 
 
}

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

 
<body> 
 

 
    <h1>This is a heading</h1> 
 

 
    <li class="intro">This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 

 

 
    <button>Add a class name to the first p element</button> 
 

 
</body> 
 

 
</html>

更新答案與prev and next幻燈片

var c = 0; 
 
$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $(this).attr('data') == 'next' ? c++ : c--; 
 
    if (c > 7) { 
 
     c = 0; 
 
    } 
 
    $("li").removeClass('intro') 
 
    $("li").eq(c).addClass("intro"); 
 

 

 
    }); 
 
});

.intro { 
 
    font-size: 150%; 
 
    color: red; 
 
}

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

 
<body> 
 

 
    <h1>This is a heading</h1> 
 

 
    <li class="intro">This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 
    <li>This is a heading</li> 
 

 

 
    <button data="next">next</button> 
 
    <button data="prev">prev</button> 
 

 
</body> 
 

 
</html>

來源

2017-05-06 07:54:45 prasanth

普拉薩德@完美的人@你是冠軍 – sanjay

普拉薩德'C = C> 7？ 0：c;'......我們不應該通過添加一個HTML元素來修改JS。你能改善你的答案，讓你的JS更具動態性嗎？ –

prasad @你在那裏 – sanjay

也許你可以做這樣的：

$(document).ready(function(){ 

    $("button").click(function(){ 
     //Find the li with the active class and add your other class 
     $("li.active").addClass("your-class"); 
    }); 
})

這裏是一個演示片段

$(document).ready(function(){ 
 

 
    $("button").click(function(){ 
 
    $("li.active").addClass('foo-class') 
 
    
 
    }) 
 
})

.foo-class{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class='active'>Active</li> 
 
    <li> Non active</li> 
 
</ul> 
 
<button>Click me</button>

來源

2017-05-06 07:50:03

爲什麼downvoting？你能解釋 –

爲什麼？你能解釋 –

@ RokoC.Buljan看看我的代碼 –

找到li與活動CLAS s並添加您的其他類

$(document).ready(function(){ 
    $("button").click(function(){ 
     // Find li and add other class 
     var l=$("body").find("li:first-child"); 
     $(l).addClass("your-class"); 
    }); 
})

來源

2017-05-06 08:53:40

感謝來改善我的答案。 –

的jQuery：當前元素

回答

相關問題