Question

我正在为一组div动态创建一个div类。该类对应于另一组div的类（也是动态生成的）。我给了他们相同的类，以便能够点击默认显示的div并显示相应的div（默认情况下不显示）。设置将是这样的，显示divs'foo'并隐藏'bar'

<div id="foo" class="one">1</div>
<div id="foo" class="two">2</div>
<div id="foo" class="three">3</div>

<div id="bar" class="one">One</div>
<div id="bar" class="two">Two</div>
<div id="bar" class="three">Three</div>

我不知道如何把它放在jQuery中。我知道这将是一个点击功能，我只是不知道如何抓住一个我不确定它的价值的类。任何帮助都非常感谢！

Answer 1

您不能拥有多个具有相同ID的元素。在修复之前，任何事情都不可能正常工作。

你在寻找这样的东西：

<div  class="foo one">1</div>
<div  class="foo two">2</div>
<div  class="foo three">3</div>

<div class="bar one">One</div>
<div class="bar two">Two</div>
<div class="bar three">Three</div>

然后当有人点击foo div：

时

$(document).on("click", "div.foo", function(){
    $("div.foo:hidden:first").show();
});

当然，这不需要one two和three类。你想要这样的东西：

<div  class="foo foo1">1</div>
<div  class="foo foo2">2</div>
<div  class="foo foo3">3</div>

var nextToShow = 1;

$(document).on("click", "div.foo", function(){
    $("div.foo" + nextToShow++).show();
});

Answer 2

正如所指出的，你必须为你的div提供不同的id，因为给予html元素的每个id必须是唯一的。但是一旦修复，在jQuery中你可以通过class这样的名字来访问和分配点击事件：

$(".one, .two, .three").click(function(e){
    alert("hello");
});

或者您可以按id收集div，如下所示：

$("#foo, #bar").click(function(e){
    alert("hello");
});

Answer 3

你可以像

那样写

<div id="foo_1" class="foo one">1</div>
<div id="foo_2" class="foo two">2</div>
<div id="foo_3" class="foo three">3</div>

<div id="bar_1" class="bar one">One</div>
<div id="bar_2" class="bar two">Two</div>
<div id="bar_3" class="bar three">Three</div>

<script type="text/javascript">
$('.foo').live('click',function(){
   $('.bar').hide();
   var classes = $(this).attr('class').split(/\s+/);
   for(var i = 0; i < classes.length; i++){
       if(classes[i] != 'foo'){
            $('.bar.'+class[i]).show();
       }
   }
});
</script>

单击打开相应div的div

3 个答案: