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

我希望选择＆＃39; buttonsRight＆＃39;如上所述。

当我更改它以选择所有＆＃39; div＆＃39;标签来测试它，它的工作原理。

generalHideOrShow（$（＆＃34; DIV＆＃34））; //选择

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

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

Answer 2

这就是我设法做到的方式：

使用onClick：

调用generalHideOrShow函数

d3.select("thisButton").on("click", function(){
generalHideOrShow("#buttonsRight");
}

首先将类设置为visible，以便稍后检查该类：

buttonsRight.classed("visible", true);

然后执行if语句来检查类是hidden还是visible

function generalHideOrShow(element) {
    console.log(element[0].getAttribute('class'));
    if(element[0].getAttribute('class') === "visible"){
        element[0].setAttribute('class', "hidden");
    } else{
        element[0].setAttribute('class', "visible");        
    }

如何使用JQuery切换功能切换一组rects的可见性？

2 个答案: