javascript - 我如何使用 JQuery 切换功能来切换一组矩形的可见性？

Question

我正在使用这个函数来显示和隐藏对象。我认为这不起作用的原因是因为我没有正确选择对象。

function generalHideOrShow(element)
    {
        if (element instanceof Element)
        {
            //single element passed
            element = [element]; //mimic node list
        }
        if(element.length && element.length > 0 && element[0] instanceof Element)
        {
            //node list
            for (var i = 0; i < element.length; ++i)
            {

                if (element[i].getAttribute("data-hidden") == "true" )
                {
                    $(element[i]).removeClass("hidden");
                    element[i].setAttribute("data-hidden", false);
                }
                else
                {
                    element[i].setAttribute("data-hidden", true);
                    $(element[i]).addClass("hidden");
                }

            }
        }
        else
        {
            return false;
        }


    }

d3.selectAll("#button1").on("click", function(){

     generalHideOrShow($("#buttonsRight")); //selection
});

var buttons = d3.select("#svg").append("g").attr("id", "buttons");
var buttonsRightTop = buttons.append("g").attr("id", "buttonsRightTop");
var buttonsRight = buttonsRightTop.append("g").attr("id", "buttonsRight");

我希望像上面那样选择“buttonsRight”。

当我将其更改为选择所有“div”标签进行测试时，它起作用了。

generalHideOrShow($("div"));//选择

我尝试过不同的选择方式，例如:

generalHideOrShow($(buttonsRight)); //selection
generalHideOrShow($(".buttonsRight")); //selection
generalHideOrShow($("g#buttonsRight")); //selection

没有一个在工作。如何选择右侧按钮？

Answer 1

既然你用的是jQuery，我想你可以把它写成

function generalHideOrShow(element) {
    var $elem = $(element);
    if ($elem.length) {
        var $hid = $elem.filter('[data-hidden="true"]').removeClass('hidden').attr("data-hidden", false);
        $elem.not($hid).addClass('hidden').attr("data-hidden", true);
    } else {
        return false;
    }
}