Question

我有一些 itemBox ，我需要点击 itemBox 并将具有相同ID号的 workItem 调用到SildeUp（隐藏了workItem）在开头）。

当 workItem SlideUp之一时，其他人将被隐藏。

<div class="container">
    <div class="row">
        <div class="wrapper">
            <div class="itemBox" id="item0">
                <img src="img/default.jpg" alt="">
                <div>titletitle</div>
            </div>

            <div class="itemBox" id="item1">
                <img src="img/default.jpg" alt="">
                <div>titletitle</div>
            </div>
        </div>
    </div>

</div>

<div class="workContent">
    <div class="workItem" id="work0" style="background-color:#000000;">
        <h2>demo1</h2>
        <img src="img/default.jpg" alt="">
        <div>contentcontentcontentcontentcontentcontent</div>
        <div>contentcontentcontentcontentcontentcontent</div>
        <div>contentcontentcontentcontentcontentcontent</div>
        <div>contentcontentcontentcontentcontentcontent</div>
    </div>

    <div class="workItem" id="work1" style="background-color:#333333;">
        <a class="close" href="javascript:">x</a>
        <h2>demo2</h2>
        <img src="img/default.jpg" alt="">
        <div>contentcontentcontentcontentcontentcontent</div>
        <div>contentcontentcontentcontentcontentcontent</div>
        <div>contentcontentcontentcontentcontentcontent</div>
        <div>contentcontentcontentcontentcontentcontent</div>
    </div>
</div>

如何使用javascript或Jquery执行此操作？

Answer 1

这很简单（我使用jQuery）：

$(".itemBox").click (function(){
   $("div[id^=work]").hide();
   var id = $(this).attr("id");
   var number = id.match(/item([0-9]+)/));
   if (number[1])
      $("div[id=work" + number[1] + "]").show();
})

选择要滑动的特定DOM

1 个答案: