Javascript 将一个事件用于多个目的

我有这样的按钮：

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

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

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

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

}))

如何编写这样的事件？

试试看

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

---

您可以测试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
    }
});

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

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

---

我建议将类添加到按钮

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

---

添加属性：

数据事件

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

---

你能试试这个吗

在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>

$（函数（）{
//用于打开模式Pop以进行评级的事件
$（'.btnRating'）。单击（函数（ele）{
var thisbutton=$（this.attr（'id'）；
如果（此按钮==“项目费率”）
{
//做一些与项目相关的事情
}else if（此按钮==“教育率”）
{
//做一些与教育相关的事情
}else if（此按钮==“Achieventrate”）
{
//做一些与项目相关的事情
}否则{
//做你的默认
}         
});
});

$（“.btnRating”）。单击（函数（）{
var action=$（this.attr（“数据操作”）；
如果（操作==“项目”）{
//做项目
}否则如果（行动==“教育”）{
//做教育
}
});

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

$('.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

}

});

此处演示

尝试以下操作：

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

使用event.delegate-类似于

我建议对每个按钮使用唯一的css类，就像更改每个输入的值一样，而不是更改JS。因此，您应该检查

$this.hasglass（'rateProj'）

---

我建议您使用数据属性来实现这一点。因为比较字符串会导致更多的时间来检查

我已经为此创建了JSFIDLE

这对你有帮助

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

---

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

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

---

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

这似乎是您的情况，因为所有按钮的名称中都有“Rate”。如果是这样，那么您应该只有一个事件，因为大多数代码都是相同的。但是，与其使用不同的代码路径（if/else或switches），不如在按钮中添加

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

$（'.btnRating'）。打开（“单击”，函数（ele）{
var率=ele.getAttribute（“数据率”）；
var成本=document.getElementById（“costToMultiplyByRate”）；
警报（费率*成本）；
}

---

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

为什么不给它们不同的ID并分别附加处理程序？或者只检查

this.value

？

if（$（this）.val（）=“…”）{..执行此操作..}

我不想创建3个事件，这只是我的问题，奇怪的是，我为什么不这样写呢？

if（~this.value.indexOf（'Project'））{…}else if（）{}

if-语句链永远不会产生清晰的可维护代码。相反，按照Manishearth的建议，用不同的处理程序给他们不同的

id

；或者描述你的实际问题，我们可以建议一个更合适的解决方案，好吧，首先，我不是这里的下一个投票人……但你要这样做你不觉得比较这些值比得到

indexOf

要好得多，而且可读性好得多……无论如何，你必须在这两种情况下编写相应的

值
this.value.indexOf（'Project'））>-1
|

这个。值=='Project'我投了反对票。@bipen给出的解释已经足够了。。如果您想更改值，那么您也需要更改JS代码。

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

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

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

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

});

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

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