Question

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

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.Is有一个更清晰的方法来实现这个目标。

Answer 1

看起来你需要on（）函数。这可以实现为：

jQuery.yourCallback = function () {
  //this here is object, on which triggered event
  //your code may be below
  jQuery(".currentactivediv").removeClass(".currentdiv").hide();
  jQuery(this).addClass(".currentdiv").show();
}
jQuery(".yourdivs").on("click",jQuery.yourCallback);

如果你想使用链接，你需要在DOM使用jQuery（this）找到所需的div。

工作原理：当div显示时 - 脚本将calss .currentactivediv分配给此div。当显示其他div时 - 脚本关闭当前div，从中删除.currentactivediv类并将此类分配给新div，显示内容。

Answer 2

你可以为你的所有div添加一个类，然后做这样的事情。这样您就不必编写30个函数

function changeImg(id) {
    $('.your-divs').stop(true, true).fadeOut({ duration: slideDuration, queue: false });
    $('#change_content'+id).stop(true, true).fadeIn({ duration: slideDuration, queue: false });
}

Answer 3

使用类似的东西：

$('.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处于同一级别，即它们是兄弟姐妹。

Javascript在点击时更改整个div

3 个答案: