模擬不同的選擇的單擊事件

我有一堆同類產品的按鈕：模擬不同的選擇的單擊事件

<button class='prd-class' data-prd-id='1'> 
     Product 1 
    </button> 

    <button class='prd-class' data-prd-id='2'> 
     Product 2 
    </button>

而且我有一個button click function像這樣：

$('.prd-class').click(function(){ 
    $('.prd-class').removeClass('cls-focus'); //remove any focused product 
    $(this).addClass('cls-focus'); //then focus on the selected one 
    $('#selected-prd-name').text($(this).data('prd-name')); 
    ... etc 
});

正如你所看到的，它使用this對象在功能裏面引用很多。

現在有另一種情況，在頁面加載時我希望執行此函數內部的行。

由於有多個產品按鈕，我想確保我模擬所需的點擊事件。

$(document).ready(function() 
{ 
    $("button[data-prd-id='"+prd_id+"']").click(); 
});

但是這不起作用。如何更改代碼以正確執行代碼行？

來源

2014-07-12 Undefined Variable

當頁面加載時，什麼'prd_id'設置爲？ – j08691

@ j08691有趣的問題，當OP名稱是'未定義變量' – charlietfl

大聲笑，'prd_id'將是其中一個ID。（1,2,3 ...） –

我不確定您的要求。但是，這個演示可能會給你一些想法來解決你的問題。

HTML： -

<button class='prd-class' data-prd-id='1'>Product 1</button> 
<button class='prd-class' data-prd-id='2'>Product 2</button> 
<div> 
    Selected Product ID: <span id="selected-prd-name"></span> 
</div>

CSS： -

.cls-focus { 
    border: 1px solid red; 
    background-color: brown; 
}

的JavaScript： -

(function() { 
    var $prdClass = $('.prd-class'), 
     $selectedPrdId = $('#selected-prd-name'), 
     prdClassClickHander = function() { 
      var $self = $(this); 
      $prdClass.removeClass('cls-focus'); 
      $self.addClass('cls-focus'); 
      $selectedPrdId.text($self.data('prd-id')); 
     }, 
     init = function() { 
      $prdClass.on("click", prdClassClickHander); 
     }; 
    $(document).ready(init); 
}()); 

// Simulate the click on DOMReady 
$(document).ready(function() { 
    var prd_id = 1; 
    $("button[data-prd-id='" + prd_id + "']").trigger('click'); 
});

JSFiddle演示： - http://jsfiddle.net/w3devjs/e27jQ/

來源

2014-07-12 22:05:46 w3dev

正是我想要的！謝謝！ –

模擬不同的選擇的單擊事件

回答

相關問題