Question

我有一个视图类“ .st1，.st2，.st3，...”，如果将它们悬停，则需要显示类“ .og1，.og2，.og3 ...”。现在，只有第一类“ .st1”正在工作。如何更改“ count”也在更改其“ oG”编号的代码？

var sT = ".st",
    oG = ".og",
    count = Number();

$(sT + count).on("mouseover", function() {
    $(oG + count).show();
}).on("mouseleave", function() {
    $(oG + count).hide();
});

Answer 1

请勿使用增量class或id属性。它们是一种反模式，使您的代码不必要地变得复杂且难以维护。

相反，在两组元素上使用相同的公用class并通过索引将它们关联。像这样：

$('.st').hover(function() {
  $('.og').eq($(this).index()).toggle();
});

.og { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="st">st #1</span>
  <span class="st">st #2</span>
  <span class="st">st #3</span>
  <span class="st">st #4</span>
  <span class="st">st #5</span>
</div>

<ul>
  <li class="og">og #1</li>
  <li class="og">og #2</li>
  <li class="og">og #3</li>
  <li class="og">og #4</li>
  <li class="og">og #5</li>
</ul>

Answer 2

尝试一下：

$("[class^='st']").on("mouseover", function() {
    var class = $(this).attr('class');
    var count = class.replace('st','');
    $(".og" + count).show();
}).on("mouseleave", function() {
    var class = $(this).attr('class');
    var count = class.replace('st','');
    $(".og" + count).hide();
});

Answer 3

根据https://www.w3schools.com/jsref/jsref_number.asp，当您使用Number（）时，它总是返回0，因此这仅与stg0一起使用，如果您有多个类，我建议您使用一个数组或告诉您哪个数字可以在“ stg”字符串中。例如：

var numberList = [1,2,3];
var sT = ".st",
    oG = ".og"

for(let i = 0; i<numberList.length; i++)
{
  $(sT + i).on("

mouseover", function() {
    $(oG + i).show();
}).on("mouseleave", function() {
    $(oG + i).hide();
});      
}

更改任何类别的变量号

3 个答案: