單擊圖庫滑塊，以觸發外部縮略圖鏈接

Question

我需要通過單擊.main和.thumb鏈接來觸發.main和.thumb鏈接。

//This code is trigger both .main and .thumb, when i click .main.
    $(".main a").on("click", function(){
    var target= $(this).attr("href");  
    $('.thumb li[data-ref="'+target+'"]').trigger('click');

});
$(".thumb li").on("click", function(){
    console.log(this);
});


//This code is trigger both .main and .thumb, when i click .thumb.
$('body').on("click",".thumb li", function(){
    var targe= $(this).attr("data-ref"); 
    $('.main a[href="'+targe+'"]').trigger('click');

});

如何制作此代碼，以便兩個鏈接都觸發.main和.thumb。

的DEmo

檢查演示。

演示2

Answer 1

您需要在屬性選擇器中加上雙引號。

$('.thumb li[data-ref="'+target+'"]').trigger('click');

工作示例： http : //jsfiddle.net/cw4yG/7/

編輯：在有疑問和評論的更多詳細信息后更改。

$(".main a").on("click", function(event){
    var target= $(this).attr("href"); 
    console.log("a: " + target);
    if(!triggered)
    {
        triggered= true;
        $('.thumb li[data-ref="'+target+'"]').trigger('click');
    }   
    else{
        triggered= false;
    }
});
$(".thumb li").on("click", function(event){
    var target= $(this).attr("data-ref"); 
    console.log("li: " + target);
    if(!triggered)
    {
        triggered= true;
        $('.main a[href="'+target+'"]').trigger('click');
    }
    else{
        triggered= false;
    }
});

http://jsfiddle.net/cw4yG/10/