3

我有一个列出产品的网站。大约有 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 重复它。有没有更清洁的方法来实现这一点。

4

3 回答 3

0

看起来你需要 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);

如果您希望它与链接一起使用，您需要在使用 jQuery(this) 的 DOM 中找到所需的 div。

它是如何工作的：当显示 div 时 - 脚本将 calss .currentactivediv 分配给这个 div。当其他 div 显示时 - 脚本关闭当前 div，从中删除 .currentactivediv 类并将该类分配给新 div，即显示的内容。

于 2013-02-04T09:28:41.033 回答
0

您可以为所有 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 });
}
于 2013-02-04T09:30:11.213 回答
0

使用这样的东西：

$('.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。

于 2013-02-04T09:30:40.257 回答