多个选择器具有相同的类如何设置单击功能？

Question

请参阅以下jsfiddle：https://jsfiddle.net/haq8jzg1/

我不希望每个$（＆＃39; .blue＆＃39;）切换点击，相反，我只想显示下一个$（＆＃39; .blue＆＃39;）。

10

我试图实施$('.red').on('click', function(){ $('.red').closest('.blue').toggle(); }); <div class="red"></div> <div class="green"></div> <div class="blue"></div> <div class="red"></div> <div class="green"></div> <div class="blue"></div> <div class="red"></div> <div class="green"></div> <div class="blue"></div> <div class="red"></div> <div class="green"></div> <div class="blue"></div> ，closest()和next()但没有成功。

Answer 1

$('.red').on('click', function(e){
  $(this).nextAll('.blue').first().toggle();
});

更强大的解决方案 - 会查看点击的.red元素并获取所有.blue元素 - 然后弹出找到的第一个（最近的）元素并切换它。

Answer 2

您可以使用.next() x2：

$('.red').on('click', function(){
  $(this).next().next('.blue').toggle();
});

<强> jsFiddle example

$(this)指的是您点击的元素，其中$('.red')选择所有类为红色的元素。

Answer 3

当你进入事件处理程序时，你应该引用this变量来访问触发事件的dom元素。

另一方面，next()返回当前之后的兄弟，因此您应该使用nextAll('selector')来获取与选择器匹配的所有兄弟姐妹。在您的情况下，您只需要第一个匹配项，因此您应该使用eq(0)过滤结果以获取第一个匹配元素。

所以最后你的代码应该是这样的：

$('.red').on('click', function(){ $(this).nextAll('.blue').eq(0).toggle(); });

Answer 4

您可以链接$(this).next().next().toggle(); 两次：

$(document).ready(function(){

$('.red').click(function(){$(this).next().next().toggle();});

});

工作示例：

div {
display: inline-block;
width: 40px;
height: 40px;
}

.red {
background: rgb(255,0,0);
}

.green {
background: rgb(0,127,0);
}

.blue {
background: rgb(0,0,255);
}

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

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

var reds = document.querySelectorAll('.red');

function toggleNextBlue() {
this.nextSibling.nextSibling.classList.toggle('hidden');
}

for (var i = 0; i < reds.length; i++) {
    var red = reds[i];
    red.addEventListener('click',toggleNextBlue,false);
}

jQuery的Javascript等价物：

div {
display: inline-block;
width: 40px;
height: 40px;
}

.red {
background: rgb(255,0,0);
}

.green {
background: rgb(0,127,0);
}

.blue {
background: rgb(0,0,255);
}

.hidden {
display: none;
}

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

 url = "http://elections.huffingtonpost.com/pollster/2012-general-election-romney-vs-obama.csv"
 source = requests.get(url).text
 s = StringIO(source)
 election_data = pd.DataFrame.from_csv(s, index_col=None).convert_objects(
        convert_dates="coerce", convert_numeric=True)
 election_data.head(n=3)
 last_day = max(election_data["Start Date"])
 filtered = election_data[((last_day-election_data['Start Date']).days <= 5)]