Question

如果您按下链接，我们会打开一个工具提示，使用jQuery'toggleclass'。有两种情况，html略有不同。这是每个人的代码。

案例1：

$(".tooltip").parent().find("a").click(function() {
    		$(".tooltip").toggleClass('on');
    	});

 .tooltip {display:none}
    .on {display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <label>
    	<span>
          Some text <a href="#">Open tooltip</a>
        </span>
    </label>

    <div class="tooltip">
    This is the tooltip text
    </div>

案例2：

    $(".tooltip").parent().find("a").click(function() {
    		$(".tooltip").toggleClass('on');
    	});

    .tooltip {display:none}
    .on {display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Some text</label> 
<span>Another text <a href="#">Open tooltip</a></span>
<div class="tooltip">This is the tooltip text</div>

这没有问题，但现在我们有一个包含两个工具提示片段的页面，如下所示：

    $(".tooltip").parent().find("a").click(function() {
    		$(".tooltip").toggleClass('on');
    	});

    .tooltip {display:none}
    .on {display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
    	<span>
          Some text <a href="#">Open tooltip</a>
        </span>
    </label>

    <div class="tooltip">
    This is the tooltip text
    </div> 

<label>
    	<span>
          Some text <a href="#">Open tooltip</a>
        </span>
    </label>

    <div class="tooltip">
    This is the tooltip text
    </div>

如您所见，此代码打开两个工具提示。我很确定jQuery中会有一些选择器允许我们找到最接近链接的工具提示，但我们尝试使用 $（this）.parents（）。find（“。tooltip” ） 和 $（this）.closest（“。tooltip”） ，但没有成功。

如何在不更改HTML代码的情况下阻止两个工具提示打开？

Answer 1

点击<a>后，您需要转到标签并转到.next('.tooltip')。有更好的方法来构建HTML以使其更容易，但下面的工作正常。

＆＃13;

    $(".tooltip").parent().find("a").click(function() {
    		$(this).parents('label').next('.tooltip').toggleClass('on');
    	});

＆＃13;

    .tooltip {display:none}
    .on {display:block}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
    	<span>
          Some text <a href="#">Open tooltip</a>
        </span>
    </label>

    <div class="tooltip">
    This is the tooltip text
    </div> 

<label>
    	<span>
          Some text <a href="#">Open tooltip</a>
        </span>
    </label>

    <div class="tooltip">
    This is the tooltip text
    </div>

＆＃13;

正如评论中所述，您的HTML有两种不同的结构，其中span包含a是label的子项，另一种是兄弟姐妹的结构。如果你想保留这个想法（哪个IMO是个坏主意！）那么你可以有一些逻辑来尝试确定在哪里找到合适的.tooltip。

＆＃13;

$(".tooltip").parent().find("a").click(function() {
    var $tt = $(this).parents('label').next('.tooltip');
    if($tt.length == 0){
      $tt = $(this).parents('span').next('.tooltip');
    }
    $tt.toggleClass('on');
});

＆＃13;

.tooltip {display:none}
    .on {display:block}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
    	<span>
          Some text <a href="#">Open tooltip</a>
        </span>
    </label>

    <div class="tooltip">
    This is the tooltip text
    </div> 

<label>
    	<span>
          Some text <a href="#">Open tooltip</a>
        </span>
    </label>

    <div class="tooltip">
    This is the tooltip text
    </div>

<label>
    	A label
    </label>
<span>
          Some text <a href="#">Open tooltip</a>
        </span>
    <div class="tooltip">
    This is the tooltip text
    </div>

＆＃13;

限制jQuery在多个元素中执行操作

1 个答案: