jquery - 切换 div 并向它们添加活动类

Question

我在这里有一个示例，其中有一些随机 div，当单击链接到它们的按钮时，我想要一个工具提示来切换 9hide/show），我可以轻松地做到这一点 - 但这是我的问题：

http://jsfiddle.net/KcLTw/1/

1）当您单击另一个按钮时，另一个工具提示不会隐藏，因此我可以打开和关闭，但单击另一个按钮时不会关闭。

2）以前，当我有一个切换时，我现在可以用我更新的代码切换类，但事实并非如此，似乎忽略了它。

3）在我的例子中，有另一种方法，而不是：

<input type="button" id="" class="buttons" value="tooltip1"></input> 

有一个 div 但我卡住的地方是从我的 jQuery 中提取值位的位置，因为 div 没有像表单元素上的值状态？

var div= $("#"+this.value);

抱歉，如果这看起来有点傻，我是 jQuery 的新手，并且在学习过程中。任何指导将不胜感激。

Answer 1

试试这个 jquery 代码：

$(".buttons").click(function () {
    tooltip = "#"+$(this).val();
    $('.tooltip').not(tooltip).hide()

    if ($(tooltip).is(":visible")) {
        $(tooltip).hide().removeClass("selected")
    } else {
        $(tooltip).show().addClass("selected")
    }
});

看看这个jsfiddle。

Answer 2

如果我理解正确，只需添加第二行代码（第一行来自您的代码作为添加位置的参考）：

var tooltip= $("#"+this.value);
$(".tooltip").hide(); 

Answer 3

你可以试试这个：

$(".buttons").click(function () {

    var tooltip= $("#"+this.value);        
    var isVisible = tooltip.is(":visible");
    $('.tooltip').hide();
    if (isVisible) {
        tooltip.hide();
    } else {
        tooltip.show();
    }

    if ($('.tooltip').is(":visible")) {
        $('?').addClass("selected"); 
    } else {
        $('?').removeClass("selected"); 
    }

});

这样您就可以关闭所有tooltip divs并切换div与button.

Answer 4

请试试这个

    $(".buttons").click(function () {
      var button = $(this);
      var buttons = $(".buttons");
      var tooltip = $("#"+this.value);

      if(button.hasClass("active")){
        $(".tooltip").hide();
        buttons.removeClass("active");
      }else {
        buttons.removeClass("active");
        $(".tooltip").hide();                    
        tooltip.toggle();
        button.addClass("active");
      }
 });

jsfiddle