Question

嘿，我这里有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')

Answer 1

我有同样的问题......

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');
});
});

这将有效：）

Answer 2

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");
});

Answer 3

尝试这个

 $(function(){
       $("a:first").removeClass("cboxElement");
        $('.thickbox').click(function(){
            $('.thickbox').each(function(obj){
                if(!$(this).hasClass("cboxElement")){
                    $(this).addClass("cboxElement");
                }
            })
            $(this).removeClass("cboxElement");
        })
    })

Answer 4

未经测试，但是：

$("#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");

});

Answer 5

(function ($) {
    $(function () {
        $('.cboxElement').click(function () {
            $(this).removeClass('cboxElement').siblings().addClass('cboxElement');
        });
    });
})(jQuery);

Answer 6

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

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

JsFiddle of the above

Answer 7

$(document).ready(function(){

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

}

试试这个..它应该有用

Answer 8

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

<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>

Answer 9

不确定这是否是最好的方式，但这有效（下面有更详细的说明）：

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');
});

您可以看到live example here。

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

var elements = new Array();

然后在页面加载时，我们将找到所有.cboxElements并做三件事： 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');

Jquery从图像中删除类

9 个答案: