的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：当前元素

回答

相关问题