Javascript 在点击时更改整个 div

Question

我有一个列出产品的网站。大约有30种产品。现在有链接到每个产品的详细信息。我想将它们全部放在一个页面上，并通过javascript更改特定的内容点击时的div。 我所知道的是，我可以创建 30 个函数来将 1 个 div 的显示更改为无……并显示另一个…… 如何实现这一点..我正在做这样的事情

function changeImg2() 
{
 $('#change_content').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).css('display', 'none');
 $('#change_content2').stop(true, true).fadeIn({ duration: slideDuration, queue: false });     
}

这是我拥有的 div 类型

<div id="change_content1">
                              <div class="viewport">
        <a id="btn" href="http://www.flickr.com/photos/matt_bango/3479048548/">
            <span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
            <img src="images/HAND HELD POWER CUTTERS.jpg" alt="Northern Saw-Whet Owl" />
        </a>
    </div>

    <div class="viewport no-margin">
        <a href="http://www.flickr.com/photos/matt_bango/3478879694/">
            <span class="dark-background">Red-shouldered Hawk <em>Photo by Matt Bango</em></span>
            <img src="images/LIGHTING TOWERS.jpg" alt="Red-shouldered Hawk" />
        </a>
    </div>

    <div class="viewport">
        <a href="http://www.flickr.com/photos/matt_bango/3478189088/">
            <span class="light-background">Blue-headed Vireo <em>Photo by Matt Bango</em></span>
            <img src="images/MAGNETIC STAND DRILLS.jpg" alt="Blue-headed Vireo" />
        </a>
    </div>

   <div><input name="back" value="back" id="back_btn1" type="button"></div>
</div>

但是这段代码不行...因为我必须重复它 30 个 div。有没有更干净的方法来实现这一点。

Answer 1

使用这样的东西:

$('.myDiv').click(function() {
    $('.myDiv').hide(); //Or whatever function you like
    $(this).show(); //or whatever function you like
});

其想法是隐藏具有相同类的所有 div，然后使用 $(this) 来操作单击的单个 div。

您可以通过为所有 div 提供类似的类来定位它们，或者如果它们都在父包装器中，则使用类似 $('.parent-wrapper > div')

评论答案:

$(this) 当在事件(例如点击函数)中使用时，与触发事件的元素相关。在本例中，它将是单个 div 上的单击事件，这意味着您可以使用它来操纵该 div，而无需瞄准其他 div。

如上所述，使用类似的类或选择器将允许您定位所有 div，以便您可以将它们作为一个组进行操作。请注意，目标 div 可能会被包含在内，因此请在目标 div 之前操作该组。

或者，您可以使用 $(this).siblings() 来操作所有其他 div，如果它们与被单击的 div 处于同一级别，即它们是同级。