Question

我需要你的帮助，

我有一个我正在创建的自定义css选择框，但是已经出现了2个新问题。

当在任一选择下拉框中进行选择时，两个选择框自动具有相同的值：

以下是快速捕捉：

当点击下拉框时，现在会出现2个黄色方框，而不是正确的方框：

以下是快速捕捉：

有问题的代码：

function test() {

    var list = $(".select dd ul li a.selected")

    if (list.length > 1) {
        var sub_array = [];
        $.each(list, function() {
            sub_array.push($(this).data('val'))
        })

        $('.select dt a span').data('val',sub_array)
    }
    else {
        $(".select dt a span").data('val',$(".select dd ul li a.selected").data('val') )

    }

        alert($('.select dt a span').data('val') )
        //alert($('.select dt a span').html() )

}



        $(document).ready(function() {

            $(".select dt a").click(function() {
                $(".select dd ul").toggle();

                $(this).css("background-color", "rgb(255,255,196)");

                //$(.select dt a span).css("background-color", "#FFF");

            });

            $(".select dd ul li a").click(function(e) {
                var text = $(this).html();

                if (e.ctrlKey) {

                    $(this).addClass('selected');

                    $(".select dt a span").html("("+ $(".select dd ul li a.selected").length+")")

                }
                else {
                    var text = $(this).html();
                    $(".select dd ul li a").removeClass('selected');
                    $(this).addClass('selected');

                    $(".select dt a span").html(text);

                    $(".select dt a").css("background-color", "");

                    $(".select dd ul").hide();
                }
                test()

            });

            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }

            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("select"))
                    $(".select dd ul").hide();
            });



    $(".select dd ul").focusout(function() {

        $(this).css("background-color", "");

    });

Answer 1

问题是你在点击处理程序中继续使用通用的jquery选择器。这意味着当您单击其中一个框时，例如：

$(".select dt a").click(function() {
    $(".select dd ul").toggle();

您正在页面上toggle()的所有实例上调用.select dd ul函数。当您使用这样的点击处理程序时，通常最好尝试按照$(this)来保留所有内容，这是处理点击的元素。

例如，上面的代码可以像这样重写：

$(".select dt a").click(function() {
    $(this).parent().siblings("dd").find("ul").toggle();

或者，这个：

$(".select dt a").click(function() {
    $(this).parent().parent().find("dd ul").toggle();

您需要浏览点击处理程序并确保它们不是在搜索整个页面，而是与点击的元素相关联。

Answer 2

这是非常基本的答案，但它会起作用：

替换：

$(".select dd ul").toggle();

使用：

$(this).parent().siblings("dd").find("ul").toggle();

Answer 3

我已经纠正了jQuery代码以便正常运行。但我完全反对使用这种方法在您的网站上使用自定义选择框。您应该考虑构建一个jQuery插件，如https://learn.jquery.com/plugins/basic-plugin-creation/所示，或者使用已存在的插件，如select2。这样，您的代码将可重用且易于维护。

function test(select) {

    var list = select.find("a.selected");

    if (list.length > 1) {
        var sub_array = [];
        $.each(list, function() {
            sub_array.push($(this).data('val'))
        })

        select.find("dt a span").data('val', sub_array)
    } else {
        select.find("dt a span").data('val', select.find("dd a.selected").data('val'))

    }

    alert(select.find("dt a span").data('val'))
        //alert($('.select dt a span').html() )

}



$(document).ready(function() {

    $(".select dt a").click(function() {
        var select = $(this).closest('.select');
        select.find('ul').toggle();

        $(this).css("background-color", "rgb(255,255,196)");

        //$(.select dt a span).css("background-color", "#FFF");

    });

    $(".select dd ul li a").click(function(e) {
        var text = $(this).html();
        var select = $(this).closest('.select');

        if (e.ctrlKey) {

            $(this).addClass('selected');

            select.find('dt span').html("(" + select.find('a.selected').length + ")")

        } else {
            var text = $(this).html();
            select.find("dd a").removeClass('selected');
            $(this).addClass('selected');

            select.find("dt span").html(text);

            select.find("dt a").css("background-color", "");

            select.find("dd ul").hide();
        }
        test(select)

    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("select"))
            $(".select dd ul").hide();
    });



    $(".select dd ul").focusout(function() {

        $(this).css("background-color", "");

    });
});

自定义css选择框的几个问题 -

3 个答案: