<分区>
标签 javascript jquery html css
<分区>
您好，我有以下问题。我有 3 个包含新闻文章的 div 框。我已经放置了一个带有 hide() 属性的文本跨度，所以当单击名为“查看更多”的按钮时，检测单击了这 3 个框的哪个按钮并 slideToggle() 隐藏文本。我试图为每个按钮分配一个变量和每个 span - 这有效(但它的方式过于重复和缓慢)。但是当我尝试使用 this 选择器(为了更快的性能而不是重复的代码)时，它失败了。我将在下面发布代码:
JSFIDDLE 在这里 https://jsfiddle.net/q0tzjpy3/
J查询:
//WORKS
var $span = $('span')[0],$span2 = $('span')[1] ,$span3 = $('span')[2];
var $button = $('button')[0] , $button2 = $('button')[1],$button3 = $('button')[2];
$('span').hide();
$($button).click(function(){
$($span).slideToggle('fast');
});
$('span').hide();
$($button2).click(function(){
$($span2).slideToggle('fast');
});
$('span').hide();
$($button3).click(function(){
$($span3).slideToggle('fast');
});
//DOESNT WORK
$(this).find('button').click(function(){
$(this).find('span').slideToggle();
});
HTML:
<div class="holder">
<div>
<h2>Blah</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p>
<button>Click to see more</button>
</div>
<div>
<h2>Blah</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p>
<button>Click to see more</button>
</div>
<div>
<h2>Blah</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci in dicta facilis ullam assumenda recusandae cum, quas alias distinctio at mollitia dolore ipsa aspernatur reiciendis. <span>Click For More Temporibus vitae quaerat, consequuntur distinctio.Click For More Temporibus vitae quaerat, consequuntur distinctio.</span></p>
<button>Click to see more</button>
</div>
</div>
CSS:
.holder{
width:80%;
margin: 0 auto;
text-align: center;
}
.holder div{
width:25%;
vertical-align: top;
border:1px solid black;
display:inline-block;
padding:20px;
}
button{
padding:10px 20px 10px 20px;
background-color:red;
color:#ffffff;
border:1px solid #000000;
cursor:pointer;
transition:background 0.4s , color 0.5s;
}
button:hover{
border:1px solid #000000;
background-color:#ffffff;
color:red;
}
最佳答案
$('button').click(function() {
$(this).prev().find('span').slideToggle(); //span is descendant of p which is previous of button
});
使用.prev()
Description: Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.
之后使用.find()
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
关于javascript - "this"选择器无法匹配函数中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36640075/
相关文章：
javascript - 在 jQuery 中，在页面加载时滑动没有动画的元素？
javascript - 将网页中选定的一组 div 导出为 PDF 或 Word
javascript - 将父链接和子链接作为一个捕获到以冒号分隔的 Label 参数中
javascript - 面板内的 HTML/CSS 中心内容——包含 JSFiddle
javascript - Google 电子表格网站表单 jQuery 脚本阻止发送
javascript - 在另一个结果中调用原型(prototype)方法会导致 'is not a function'