2

嘿，我这里有这 3 张图片缩略图...

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">

<a class="thickbox cboxElement" title="DSC_0118" href="/wp-content/uploads/2012/07/DSC_0118.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/DSC_0118.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="DSC_0118" alt="DSC_0118" src="/wp-content/uploads/2012/07/DSC_0118-50x50.jpg">
</a>

<a class="thickbox cboxElement" title="P7230376" href="/wp-content/uploads/2012/07/P7230376.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230376.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230376" alt="P7230376" src="/wp-content/uploads/2012/07/P7230376-50x50.jpg">
</a>

<a class="thickbox cboxElement" title="P7230378" href="/wp-content/uploads/2012/07/P7230378.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230378.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230378" alt="P7230378" src="/wp-content/uploads/2012/07/P7230378-50x50.jpg">
</a>
</div>

我想要做的是想出一个 jquery 代码，cboxElement当页面加载时，它会从第一个图像中删除，如果我单击其中一个图像来删除cboxElement并放置cboxElement到没有cboxElement类的图像..

希望这是有道理的，我已经尝试了我提供的所有答案，但没有任何效果:(

这适用于第一部分....从第一个链接中删除 cboxElement

<script type="text/javascript">
    jQuery('document').ready(function($){
        $(".wpcart_gallery a:first").removeClass("cboxElement");
        $('.thickbox').click(function(){
            $('.thickbox').each(function(obj){
                if(!$(this).hasClass("cboxElement")){
                    $(this).addClass("cboxElement");
                }
            })
            $(this).removeClass("cboxElement");
        })

    });
</script>

点击功能根本不起作用:(这是一个wordpress网站所以我不得不把jQuery('document')而不是$('document')

4

9 回答 9

3

我遇到过同样的问题....

jQuery('document').ready(function($){
$(".wpcart_gallery a:first").removeClass("cboxElement");
jQuery(".wpcart_gallery img").click(function($){
jQuery(".wpcart_gallery a").addClass('cboxElement');
jQuery(this).closest('a').removeClass('cboxElement');
});
});

这将工作:)

于 2012-09-20T05:40:50.717 回答
1 
jQuery( function(){
    var images = jQuery("#wpcart_gallery").on("click","a", function(e){
        e.preventDefault();
        images.addClass("cboxElement");
        jQuery(this).removeClass("cboxElement");
    });
    images.eq(0).removeClass("cboxElement");
});
于 2012-09-06T21:27:11.140 回答
1

试试这个

 $(function(){
       $("a:first").removeClass("cboxElement");
        $('.thickbox').click(function(){
            $('.thickbox').each(function(obj){
                if(!$(this).hasClass("cboxElement")){
                    $(this).addClass("cboxElement");
                }
            })
            $(this).removeClass("cboxElement");
        })
    })
于 2012-09-17T08:32:57.827 回答
0

未经测试，但：

$("#wpcart_callery img").click(function(){

    // strip the class from all of them
    $("#wpcart_gallery img").removeClass("cboxElement");

    // add it to the clicked one
    $(this).addClass("cboxElement");

});
于 2012-09-06T21:26:09.800 回答
0 
(function ($) {
    $(function () {
        $('.cboxElement').click(function () {
            $(this).removeClass('cboxElement').siblings().addClass('cboxElement');
        });
    });
})(jQuery);
于 2012-09-06T21:36:02.750 回答
0

我假设您希望通过没有类来“选择”页面上的第一个图像，然后通过没有类来更改类以指示选择.cboxElement

$(function() {
  var list = $('.wpcart_gallery .cboxElement').click(function() {
    list.not('.cboxElement').addClass('cboxElement');
    $(this).removeClass('cboxElement');
  });
  list.first().click();
});

上面的 JsFiddle。

于 2012-09-15T06:32:58.233 回答
0 
$(document).ready(function(){

   $(".wpcart_gallery").filter("a:first").removeClass("cBoxElement");      
   $(".wpcart_gallery").on("click", "a", function(){
       $(".wpcart_gallery a").addClass("cBoxElement");
       $(this).removeClass("cBoxElement");   

}

试试这个..它应该工作

于 2012-09-16T07:29:11.620 回答
0

是因为您只是缺少一些分号吗？您在控制台窗口中看到什么错误？

<script type="text/javascript">
    jQuery('document').ready(function($){
        $(".wpcart_gallery a:first").removeClass("cboxElement");
        $('.thickbox').click(function(){
            $('.thickbox').each(function(obj){
                if(!$(this).hasClass("cboxElement")){
                    $(this).addClass("cboxElement");
                }
            });  //<-- semi-colon added here
            $(this).removeClass("cboxElement");
        });  //<-- semi-colon added here
    });
</script>
于 2012-09-17T21:28:47.793 回答
0

不确定这是否是最好的方法，但这有效（下面有更详细的解释）：

var elements = new Array();
jQuery(document).ready(function() {
    $('.cboxElement').each(function() {
        var element = $(this);
        element.attr('href', '#');
        element.click(function() {
            for (var i in elements) {
                elements[i].addClass('cboxElement');
            }
            $(this).removeClass('cboxElement');
         });
        elements.push(element);
    });
    $('.cboxElement:first').removeClass('cboxElement');
});

你可以在这里看到一个活生生的例子。

保留页面上所有 .cboxElement 元素的列表：

var elements = new Array();

然后在页面加载时，我们将找到所有的 .cboxElement 并做三件事： 1.<a>通过将href属性设置为'#' 2. 为每个元素设置点击侦听器（将 cboxElement 类添加到所有原始元素，然后从刚刚单击的元素中删除 cboxElement）。3. 填充我们所有元素的列表

$('.cboxElement').each(function() {
    var element = $(this);
    // 1. remove <a> tag behavior
    element.attr('href', '#');
    // 2. set click listener
    element.click(function() {
        for (var i in elements) {
            elements[i].addClass('cboxElement');
        }
        $(this).removeClass('cboxElement');
     });
    // 3. keep track of all the .cboxElements
    elements.push(element);
});

然后，一旦我们准备好，从第一个中删除 cboxElement。

    $('.cboxElement:first').removeClass('cboxElement');
于 2012-09-19T02:46:16.947 回答