Question

如何在不更改HTML标记的情况下减少此jQuery代码？我应该使用数据属性吗？但我不知道怎么能来这个图像元素。以下是示例：https://jsfiddle.net/y277bavo/2/

$(".tlh-1, .tlb-1").hover(
  function() {
    $(".icon1-hover").css('display', 'block');
  },
  function() {
    $(".icon1-hover").css('display', 'none');
  });
$(".tlh-2, .tlb-2").hover(
  function() {
    $(".icon2-hover").css('display', 'block');
  },
  function() {
    $(".icon2-hover").css('display', 'none');
  });

<div class="row">
  <div class="block">
    <div class="head tlh-1">
      <h4>Lorem ipsum.</h4>
    </div>
    <div class="body tlb-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
  </div>
  <p class="image-hover"><img class="icon1-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt=""></p>
</div>
<div class="row">
  <div class="block">
    <div class="head tlh-2">
      <h4>Lorem ipsum.</h4>
    </div>
    <div class="body tlb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
  </div>
  <p class="image-hover"><img class="icon2-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt=""></p>
</div>

Answer 1

您可以将DOM元素关系用作

$(".block").hover(function() {
    $(this).closest('.row').find('.image-hover img').show();
},
function() {
    $(this).closest('.row').find('.image-hover img').hide();
});

$(".block").hover(function() {
    $(this).closest('.row').find('.image-hover img').show();
  },
  function() {
    $(this).closest('.row').find('.image-hover img').hide();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="block">
    <div class="head tlh-1">
      <h4>Lorem ipsum.</h4>
    </div>
    <div class="body tlb-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
  </div>
  <p class="image-hover">
    <img class="icon1-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt="">
  </p>
</div>
<div class="row">
  <div class="block">
    <div class="head tlh-2">
      <h4>Lorem ipsum.</h4>
    </div>
    <div class="body tlb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
  </div>
  <p class="image-hover">
    <img class="icon2-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt="">
  </p>
</div>

Answer 2

为什么要将JS用于CSS？对于解决方案，您只需要CSS。删除你的JS并添加这个CSS。我在你的jsFiddle上测试了它！

.row {
  display: inline-block;
  float: left;
  width: 50%;
}

[class ^= "tlh-"],[class ^= "tlh-"] {
    [class $= "-hover"] {
        display: none;
    }
}

[class ^= "tlh-"]:hover,[class ^= "tlh-"]:hover {
    [class $= "-hover"] {
        display: block;
    }
}

Answer 3

您可以更改您的jQuery，如下所示。 Updated fiddle

$(".head").hover(
  function() {
    $(this).parents('.row').find('img').show();
  },
  function() {
    $(this).parents('.row').find('img').hide();
  });

Answer 4

另一种选择是：

$(function () {
    $('[class*="tlh-"], [class*="tlb-"]').hover(
        function () {
            $(this).parent().next('p').find('img').css('display', 'block');
        },
        function () {
            $(this).parent().next('p').find('img').css('display', 'none');
    });
});

我的建议是：

＆＃13;

$(function () {
  $('[class*="tlh-"], [class*="tlb-"]').hover(
    function () {
      var matchResult = this.className.match(/t?b-([0-9])/);
      if (matchResult != null && matchResult.length == 2) {
        $(".icon" + matchResult[1] + "-hover").css('display', 'block');
      }
    },
    function () {
      var matchResult = this.className.match(/t?b-([0-9])/);
      if (matchResult != null && matchResult.length == 2) {
        $(".icon" + matchResult[1] + "-hover").css('display', 'none');
      }
    });
});

＆＃13;

.icon1-hover,
.icon2-hover {
  display: none;
}

.row {
  display: inline-block;
  float: left;
  width: 50%;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<div class="row">
    <div class="block">
        <div class="head tlh-1">
            <h4>Lorem ipsum.</h4>
        </div>
        <div class="body tlb-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
    </div>
    <p class="image-hover"><img class="icon1-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt=""></p>
</div>
<div class="row">
    <div class="block">
        <div class="head tlh-2">
            <h4>Lorem ipsum.</h4>
        </div>
        <div class="body tlb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, facilis!.</div>
    </div>
    <p class="image-hover"><img class="icon2-hover" src="https://i.stack.imgur.com/F65tu.jpg?s=48&g=1" alt=""></p>
</div>

＆＃13;

减少悬停的乘法元素的代码

4 个答案: