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>

私がやろうとしているのはcboxElement、ページがロードされたときに最初の画像から削除するjqueryコードを考え出し、画像の1つをクリックして削除し、クラスを持たない画像にcboxElement配置することです..cboxElementcboxElement

これが理にかなっていることを願っています。提供されたすべての回答を試しましたが、何も機能しませんでした:(

これは最初の部分で機能しました....最初のリンクから 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

クラスを持たないことでページ上で最初の画像を「選択」し、その後クラスを変更してクラスを持たないことで選択を示すことを想定しています.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();

次に、ページの読み込み時に、すべての .cboxElements を見つけて、次の 3 つのことを行います。 1.属性を<a>設定して、通常のタグの動作を削除し ます。元の要素を削除し、クリックしたばかりの要素から cboxElement を削除します)。3. すべての要素のリストを作成しますhref'#'

$('.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 に答える
0 
(function ($) {
    $(function () {
        $('.cboxElement').click(function () {
            $(this).removeClass('cboxElement').siblings().addClass('cboxElement');
        });
    });
})(jQuery);
于 2012-09-06T21:36:02.750 に答える