Как использовать функцию переключения 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; 
    } 
} 

Answer 2

Это, как мне удалось это сделать:

Вызвать generalHideOrShow функции с OnClick:

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

сначала установите класс на visible, чтобы вы могли проверить класс позже:

buttonsRight.classed("visible", true); 

Тогда делать, если заявления, чтобы проверить, если класс 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");   
    }