Question

jquery有两个id相同的div时候，第二个div没法触发，需要怎么修改？

<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript">
$(document).ready(function() {
function show(){
alert('show');
}
$('.MoreB').click(function() {
if ($('#styleDes').hasClass('brief')) $('.MoreB').text('Close');
else $('.MoreB').text('More');
$('#styleDes').toggleClass('brief');
$('#styleDes').slideToggle();
});
});
</script>
<div class="MoreB">More</div>
<div id="styleDes" class="brief" style="display:none;" >This is a paragraph.</div>
<div id="MoreB">More</div>
<div id="styleDes" class="brief" style="display:none;" >This is a paragraph.</div>

Answer 1

id只能有一个的，可以把id改成class。

Answer 2

html的dom结构中id必须是唯一的

Answer 3

为什么要相同呢?
非要相同试试这样吧$("div[id='styleDes']")

追问

不行，因为这个页面上有很多需要来more出来的，写多个的话感觉冗余太多。

追答

那就用class 还是用属性获取的方式

追问

用class也行啊，问题是用class之后，多个class会被一起触发吧

追答

那他们的关系你别忘了 兄弟关系

追问

主要是怎么让js只选择他后面的div进行展示。

追答

$(this).next()
ok?

Answer 4

不要让id相同，这是最基本的
你要的是什么效果？

追问

More

This is a paragraph.
More
This is a paragraph.
页面上会有很多这些id，比如MoreD,MoreE等，想要节省下js代码。能用class也更好，不知道怎么做

追答

用语言描述一下你要的是什么效果？

追问

页面上有多个more链接，每个more点击之后下拉出来更多的内容。内容可以包在morediv里，也可以紧跟在div之后。点击more之后，内容展示出来，同时more文字变为close。点击close，内容收缩，同时close文字变成more。
more内容
more内容

more内容

追答

$(function(){
$(".more").click(function(){
var $this = $(this);
if ($this.hasClass("opened")) {
$this.text("more").removeClass("opened").next().slideUp();
} else {
$this.text("close").addClass("opened").next().slideDown();
}
}).next().hide();
});

more内容
more内容
more内容

Answer 5

两个ID相同没有报错吗？

追问

页面没有报错，能否选择被点击的div呢

追答

你别用ID选择器，用类选择器试试！