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

单击Event IF语句

2 个答案: