Question

我有一堆产品按钮，如：

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

但这不起作用。如何更改代码以正确执行代码行？

Answer 1

我不确定你的要求。但是，此演示可能会为您提供一些解决问题的建议。

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

模拟不同选择器的单击事件

1 个答案: