Question

我有这样的按钮：

 <input class="btnRating"  type="button" value="Project Rate" />

 <input class="btnRating"  type="button" value=" Education Rate" />

 <input class="btnRating"  type="button" value="Achievement Rate" />

我想根据不同的点击，不同的目的使用3个按钮

在某种情况下我想这样写：

// Event For Open Modal Pop for rating
$('.btnRating').on("click", function (ele) {

if(thisbutton ==Project )
{
// do something for project related
}

if(thisbutton ==Education)
{
// do something for Education related
}

if(thisbutton ==Achievement)
{
// do something for project related
}

}）;

我该怎么写这样的事件？

Answer 1

如果点击每个按钮会产生完全不同的后果

如果它们由不同的事件处理，则更合乎逻辑。不同的含义他们不共享大部分代码。即使你不想写三个事件（为什么？它的代码行数相同），它更适合用例。

如果点击每个按钮会产生类似的后果

这似乎是你的情况，因为所有按钮的名称都有“Rate”。如果是这样，那么你应该只有一个事件是正确的，因为大多数代码都是相同的。但是，不是使用不同的代码路径（if / else或switch），最好是在按钮中添加data-属性，以便通过使用这些属性中的值，相同的代码可以在不同的行为中运行方法。假设它们之间的唯一区别是“速率乘数”。你可以这样做：

<input type="text" id="costToMultiplyByRate" />
<input class="btnRating"  type="button" value="Project Rate" data-rate="5" />
<input class="btnRating"  type="button" value=" Education Rate" data-rate="4" />
<input class="btnRating"  type="button" value="Achievement Rate" data-rate="10" />

$('.btnRating').on("click", function (ele) {
    var rate = ele.getAttribute("data-rate");
    var cost = document.getElementById("costToMultiplyByRate");
    alert(rate * cost);
}

但是，如果只添加一个或两个数据属性，则无法使三个按钮使用完全相同的代码，我建议您使用多个事件。

Answer 2

尝试

$('.btnRating').on("click", function (ele) {
    if (this.value.indexOf('Project') > -1) {
        // do something for project related
    } else if (this.value.indexOf('Education') > -1) {
        // do something for Education related
    } else if (this.value.indexOf('Achievement') > -1) {
        // do something for project related
    }
});

Answer 3

您可以测试cbutton的值

$('.btnRating').on("click", function (ele) {
    if (this.value == 'Project Rate') {
        // do something for project related
    } else if (this.value == ' Education Rate') {
        // do something for Education related
    } else if (this.value == 'Achievement Rate') {
        // do something for project related
    }
});

更好的解决方案是为按钮设置一个唯一的选择器，并为每个按钮编写单独的处理程序

Answer 4

尝试：

$('.btnRating').on("click", function (ele) {
    var val = $(this).val();
    if(val == "Project Rate"){
    }
    else if(val == " Education Rate"){
    }
    else if(val == "Achievement Rate"){
    }
});

Answer 5

我建议为按钮添加类

<input class="btnRating project"  type="button" value="Project Rate" />

<input class="btnRating education"  type="button" value=" Education Rate" />

<input class="btnRating Achievement"  type="button" value="Achievement Rate" />

然后使用分开的事件

$('.btnRating.project').on("click", function (ele) {
 // do something for project related
});

Answer 6

添加属性：data-event

<input class="btnRating"  type="button" value="Project Rate" data-event="project" />

然后你可以使用开关

$('.btnRating').on("click", function (ele) {
    switch($(this).data("event")) {
        case "project" : 
            //fire your function
            break;
    }
}

Answer 7

你能试试吗，

在HTML部分：

    <input class="btnRating" id="ProjectRate"  type="button" value="Project Rate" />

     <input class="btnRating"  id="EducationRate" type="button" value=" Education Rate" />

     <input class="btnRating" id="AchievementRate"  type="button" value="Achievement Rate" />

在剧本中：

 <script>
    $(function(){       
        // Event For Open Modal Pop for rating
        $('.btnRating').click(function (ele) {

            var thisbutton = $(this).attr('id');

            if(thisbutton =="ProjectRate")
            {
            // do something for project related
            }else if(thisbutton =="EducationRate")
            {
            // do something for Education related
            }else if(thisbutton =="AchievementRate")
            {
            // do something for project related
            }else{
            // do your default
              }         
        });
    });

</script>

Answer 8

<input class="btnRating"  type="button" data-action="project" value="Project Rate" />
<input class="btnRating"  type="button" data-action="education" value=" Education Rate" />
<input class="btnRating"  type="button" data-action="achievement" value="Achievement Rate" />

$(".btnRating").click(function () {
    var action = $(this).attr("data-action");
    if (action === "project") {
        // do project

    } else if (action === "education") {
        // do education
    }
});

通过这种方式，您可以在按钮上显示任何值（文本），如果您希望将来全球化您的网站，这是很好的。

Answer 9

$('.btnRating').click(function (ele) {

if($(this).val()=="Project Rate" )
{
// do something for project related

}

else if($(this).val() =="Education Rate")
{
// do something for Education related

}

else if($(this).val() =="Achievement Rate")
{
// do something for project related

}

});

在这里演示http://jsfiddle.net/3Mf3j/

Answer 10

试试这个：

$('.btnRating').on("click", function (ele) {
    var value = $(this).val();

    if(value.indexOf("Project Rate") != -1)
    {
        // do something
    }
    else if(value.indexOf("Education Rate") != -1)
    {
       // do something
    }
    else if(value.indexOf("Achievement Rate") != -1)
    {
       // do something
    }
});

Answer 11

使用event.delegate http://api.jquery.com/delegate/ - 类似于http://jsfiddle.net/aamir/zw27q/2/

我建议为每个按钮使用唯一的css类，就好像你改变每个输入的Value一样，也要改变你的JS。因此，您应该检查val=='Project Rate

，而不是检查$this.hasClass('rateProj')

$(".btns").delegate("input", "click", function () {
    var $this = $(this),
        val = $this.val();

    if (val =='Project Rate') {
        //code
    }
    //more if statements
});

Answer 12

我建议您使用data-attribute来实现此目的。比较字符串会导致更多时间进行检查......

我为此创建了jsfiddle。

http://jsfiddle.net/x4yyp/2/

$(document).on("click", ".btnRating", function () {
    var optionValue = $(this).data("optionvalue");
    if(optionValue == 1)
    {
        alert("hello");
    }
    else if(optionValue == 2)
    {
        alert("your name");
    }
    else if(optionValue == 3)
    {
        alert("your email");
    }

});

Answer 13

这会对你有所帮助

$(document).ready(function(e) {
    $('.btnRating').on("click", function (ele) {
        var btnType = $(this).val();
        switch(btnType) {
            case 'Project Rate':
                    // your action;
                break;
            case ' Education Rate':
                // your action;
                break;
            case 'Achievement Rate':
                // your action;
                break;
        }
    });
});

使用一个事件用于多种目的

13 个答案: