jquery 将mouseover与多个元素上的特定类ID添加结合起来

x8diyxa7 于 2023-04-11 发布在 jQuery

关注(0)|答案(1)|浏览(166)

我寻求帮助，因为我不能修复这个javascript，因为我想。基本上我想添加类“打字机”的id“textanimation”上鼠标悬停，然后删除它。
其余的工作，在这个意义上说，我正确地购买了div与描述性文本和照片。感谢所有的建议
https://codepen.io/bastia-g5/pen/LYgPGNp

$(document).ready(function() {
    $('h1').hover(function(){
        var element = document.getElementById("textanimation");
            element.classList.add("typewriter");
        $('#d'+$(this).prop('id')).show();
    }, function() {
        var element = document.getElementById("textanimation");
            element.classList.remove("typewriter");
        $('#d'+$(this).prop('id')).hide();
    });
    
});

.first {
 display:none;    
}

.hover_img {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sectionhome">
    <div class="row verticalalign">
        <div class="col">
            <div>
                <h1 id="firstdiv">Brand</h1>
            </div>
            <div class="hover_img" id="dfirstdiv">
                <p id="textanimation" class="subtitle">There are many variations of passages of Lorem Ipsum available</p>
                <img src="https://picsum.photos/200/300">
            </div>
      
      <div>
                <h1 id="seconddiv">Servizi</h1>
            </div>
            <div class="hover_img" id="dseconddiv">
                <p id="textanimation" class="subtitle">There are many variations of passages of Lorem Ipsum available</p>
                <img src="https://picsum.photos/200/300">
            </div>
      
      <div>
                <h1 id="thirddiv">B2B</h1>
            </div>
            <div class="hover_img" id="dthirddiv">
                <p id="textanimation" class="subtitle">There are many variations of passages of Lorem Ipsum available</p>
                <img src="https://picsum.photos/200/300">
            </div>
      
      
        </div>
    </div>
</section>

jquery

来源：https://stackoverflow.com/questions/75940072/combine-mouseover-with-specific-class-id-addition-on-multiple-elements

1条答案

按热度按时间

bgibtngc1#

您的代码无法工作，因为您有多个ID为textanimation的元素，但HTML ID必须是唯一的。这意味着var element = document.getElementById("textanimation");总是返回具有该ID的第一个元素。相反，使用一个类来选择所需的元素，并使用jQuery的.find将搜索限制在显示的<div>的子元素：

$(document).ready(function() {
  $('h1').hover(function() {    
    const id = $(this).attr('id');
    const containerId = `d${id}`;
    
    $(`#${containerId}`)
      .show()
      .find('.subtitle').toggleClass('typewriter', true)
    ;
  }, function() {
    const id = $(this).attr('id');
    const containerId = `d${id}`;
    
    $(`#${containerId}`)
      .hide()
      .find('.subtitle').toggleClass('typewriter', false)
    ;
  });
});

.first {
  display: none;
}

.hover_img {
  display: none;
}

.typewriter {
  border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sectionhome">
  <div class="row verticalalign">
    <div class="col">
      <div>
        <h1 id="firstdiv">Brand</h1>
      </div>
      <div class="hover_img" id="dfirstdiv">
        <p id="textanimation" class="subtitle">There are many variations of passages of Lorem Ipsum available</p>
      </div>

      <div>
        <h1 id="seconddiv">Servizi</h1>
      </div>
      <div class="hover_img" id="dseconddiv">
        <p id="textanimation" class="subtitle">There are many variations of passages of Lorem Ipsum available</p>
      </div>

      <div>
        <h1 id="thirddiv">B2B</h1>
      </div>
      <div class="hover_img" id="dthirddiv">
        <p id="textanimation" class="subtitle">There are many variations of passages of Lorem Ipsum available</p>
      </div>

    </div>
  </div>
</section>

赞(0）回复(0）举报 2023-04-11

我来回答

jquery 将mouseover与多个元素上的特定类ID添加结合起来

1条答案

相关问题

热门标签

最新问答