Question

我有动态创建的按钮和其他元素。

<input name="qbut" type="button" id="qbut" value="Go" />

<input name="qbut1" type="button" id="qbut1" value="Go" />

<input name="qbut2" type="button" id="qbut2" value="Go" />

这是在单击#qbut按钮时执行某些操作的功能：

$(document).ready(function() {
    $("#qbut").click(function() {
        var qvendor = $("#qvendor").val();
        var qmiles = $("#qmiles").val();
        var qtaxes = $("#qtaxes").val();
        var qprice = $("#qprice").val();
        var qqty = $("#qqty").val();
        var qprofit = qprice * qqty - qprice * qqty * 3.2 / 100
            - qtaxes - qmiles * qvendor / 100000;
        var qamex = qprice * qqty * 3.2 / 100;
        var qgross = qprice * qqty ;
        var fqprofit = formatDollar(qprofit);
        var fqamex = formatDollar(qamex);
        var fqgross = formatDollar(qgross);

        $('#qgross').val(fqgross);
        $('#qamex').val(fqamex);
        $('#qprofit').val(fqprofit);
    });
});

如何为每组设置相同的功能？

例如：按下#qbut1时，它适用于：

$("#qbut1").click(function() {
    var qvendor = $("#qvendor1").val();

    // etc.
});

基本上我需要从按钮ID元素中获取数字变量，并在函数中应用该变量来选择相应的元素。

Answer 1

好的，我认为通过结合2个答案，这应该有效：

<input class="myButton" name="qbut" type="button" id="qbut" value="Go" />

$(".myButton").click(function() {
   extractedString = $(this).prop('id').replace ( /[^\d.]/g, '' );
alert('integeris extracted  : ' + extractedString);

});

Answer 2

我认为你需要使用一个类来连接这样的事件：

<input class="myButton" name="qbut" type="button" id="qbut" value="Go" />

<input class="myButton" name="qbut1" type="button" id="qbut1" value="Go" />

<input class="myButton" name="qbut2" type="button" id="qbut2" value="Go" />

然后在JQuery中你可以像：

$(".myButton").click(function() {
var qvendor = $("#qvendor").val();
}

Answer 3

试试这个：演示 http://jsfiddle.net/EAwbD/ click second button

所以想法是从字符串中提取数字，然后将其+提取到qvendor对象：

示例：extractedString = whateeverid.replace ( /[^\d.]/g, '' );

我认为休息符合需要:)

$("#qbut1").click(function() {
       extractedString = $(this).prop('id').replace ( /[^\d.]/g, '' );
       var qvendor = $("#qvendor" + extractedString  ).val();

});

或

$("#qbut1").click(function(e) { extractedString = e.target.id.replace ( /[^\d.]/g, '' ); var qvendor = $("#qvendor" + extractedString ).val(); });

Answer 4

对按钮使用类而不是id，并在更高级别的元素上使用.on指定单击处理程序。

使用数据类（将分组类设置为按钮上的数据元素）或将id后缀设置为按钮E.g上的数据项。（您只需要data-qclass或data-qnum，具体取决于您使用的那个）

<input class="qbutton" data-qclass="q0" data-qnum="" name="qbut" type="button" id="qbut" value="Go" />

<input class="qbutton" data-qclass="q1" data-qnum="1" name="qbut1" type="button" id="qbut1" value="Go" />

<input class="qbutton" data-qclass="q2" data-qnum="2" name="qbut2" type="button" id="qbut2" value="Go" />

使用相应的javascript

$(document).ready(function() {
    $(document).on(".qbutton", 'click', function() {

        // Using ids for fetching the data
        var q_num = $(this).data('qnum');
        var qvendor = $("#qvendor" + q_num).val();
        var qmiles = $("#qmiles" + q_num).val();

        // Alternative use classes
        var all_data_items = $('.' + $(this).data('qclass'));
        var qvendor = $(".qvendor", all_data_items).val();
        var qmiles = $(".qmiles", all_data_items).val();


    });
});

你可以根据ids（你仍然需要一个公共类来分配点击事件，但没有数据元素），但我认为使用数据 - 更清晰。但是，对于基于id的变体，请使用javascript

$(document).ready(function() {
    $(document).on(".qbutton", 'click', function() {

        // Fetch the rest of the id of the button to use as a suffix for the data element ids
        var q_num = $(this).attr('id').replace(/qbut/, '');

        // Fetch data
        var qvendor = $("#qvendor" + q_num).val();
        var qmiles = $("#qmiles" + q_num).val();


    });
});

警告：根本没有经过测试，但应该可以使用！

基于ID的JQuery执行功能

4 个答案: