单击事件 IF 语句

Question

我正在尝试创建一个按钮处理程序，它将查看 if 语句以确定要运行的函数。

我已经创建了三个单独的按钮处理程序，它们工作正常（基于 ID），但我想通过按类选择然后按 ID 过滤将它们合二为一。不过我不能完全理解语法。代码如下，提前感谢您的任何帮助。

$(".btnSort").click(function() {
    console.log('button clicked');
var divList = $(".listing").toArray();
divList.sort(function(a, b){
    //sort by alpha
    if ($(this).hasId('#alphBtn')) {
        return $(a).find('.hotel').text() > $(b).find('.hotel').text() ? 1 : -1; ;
    }
    //sort by price
    else if ($(this).hasId('#priceBtn')) {
        return +$(b).find('.price').data('price') - +$(a).find('.price').data('price');
    }
    //sort by rating
    else {
        return +$(b).find('.stars').data('sort') - +$(a).find('.stars').data('sort');
    }
});
$("#container").html(divList);
$('.btnSort').removeClass('active');
$(this).addClass('active');
});
});

这里是小提琴：http：//jsfiddle.net/dvmac/h58exqsu/13/

Answer 1

这是我会尝试的。我更改了$(".btnSort").click处理程序，以将按钮id保存到clickedButtonId变量中，稍后用于比较。我还没有测试过代码，但我会试一试。

  $(".btnSort").click(function() {
    var clickedButtonId = $(this).attr("id");
    //console.log("clicked button id: " + clickedButtonId);
    var divList = $(".listing").toArray();
    divList.sort(function(a, b){
        if (clickedButtonId === 'alphBtn') {
            return $(a).find('.hotel').text() > $(b).find('.hotel').text() ? 1 : -1; ;
        }
        //sort by price
        else if (clickedButtonId === 'priceBtn') {
            return $(b).find('.price').data('price') - +$(a).find('.price').data('price');
        }
        //sort by rating
        else {
            return $(b).find('.stars').data('rating') - +$(a).find('.stars').data('rating');
        }
    });
    $("#container").html(divList);
    $('.btnSort').removeClass('active');
    $(this).addClass('active');
    });
});

Answer 2

与其创建if语句，不如在 jquery 中使用适当的选择器来查询这些按钮吗？

例子：

 $('#test') // query for ellements that has id="test"
 $('.test') // query for ellements that has class="test"
 $('#test .test') // query for child ellements of id="test" that has class="test"
 $('.test #test') // query for child ellements of class="test" that has id="test"
 $('#a, #b') // query for child ellements with id="a" or id="b"

你只需要正确创建你的选择器，并放置任何你想要的处理程序，比如.on("click", function () {});