jquery 当用户单击任一按钮时，我希望位置的名称淡入，但无法使用此条件语句

bxpogfeg 于 2023-02-12 发布在 jQuery

关注(0)|答案(2)|浏览(65)

当用户单击任一按钮时，我希望位置的名称淡入，但我无法让它与此条件语句一起工作。我有一个"Next"和一个"Previous"按钮。我想通过使用www.example.com引用当前元素，可以在用户单击每个特定图片时淡入（）元素中与该图片相关的额外信息e.target I could fadeIn() the extra information in my elements relevant to to each specific picture when the user clicks over to that picture

HTML

 <div class="divs">
       <div id="motion1"><img class="motion" src="./c1.jpg"><span class="info">Copacabana</span></div>
        <div><img id="motion2" class ="motion" src="./c2.jpg"><span class="info">Ipanema</span></div>
       <div><img id="motion3" class="motion" src="./c3.jpg"><span class="info">Florianópolis</span></div>
        <div><img id ="motion4" class="motion" src="./c4.jpg"><span class="info">Jericoacoara</span></div>
        <div><img id="motion5" class="motion" src="./c5.jpg"><span class="info">Praia da Trindade</span></div>
       <div><img id="motion6" class="motion" src="./c6.jpg"><span class="info">Porto de Galinhas</span></div>

      
    </div>

$(function() {

    $(".divs div:not('#motion1')").hide();
    let $span = $("span");
    $span.hide();

这是所讨论的点击事件所附的条件语句

$("#button2").on("click", function(e) {
    let target = e.target;
    if ($(this) == target) {
        $span.fadeIn();
    }
})

jquery

来源：https://stackoverflow.com/questions/75392761/when-a-user-clicks-on-either-button-id-like-for-the-name-of-the-location-to-fad

2条答案

按热度按时间

46qrfjad1#

正如我从你的解释理解。你想显示的跨度内的相关信息属于图片被点击。
下面是一个从你的代码中产生的示例代码来展示这一点。如果这是你想要的，请检查它。

<html>
  <head>
  <meta charset = "UTF-8">
   <title>----</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
   <script>
    $(document).ready(function(){
      $(".divs div:not('#motion1')").hide();
       let $span = $(".info");
      $span.hide();
      $(".motion").on("click", function(e) 
          {
             
             //console.log($(this).parent())
             $(".info").hide();
             $(this).parent().children("span").fadeIn()
        })
    });
    </script>
    
  </head>

  <body>
  <div class="divs">
      <div id="motion1"><img class="motion" src="./c1.jpg"><span     class="info">Copacabana</span></div>
      <div><img id="motion2" class ="motion" src="./c2.jpg"><span class="info">Ipanema</span></div>
      <div><img id="motion3" class="motion" src="./c3.jpg"><span class="info">Florianópolis</span></div>
      <div><img id ="motion4" class="motion" src="./c4.jpg"><span class="info">Jericoacoara</span></div>
      <div><img id="motion5" class="motion" src="./c5.jpg"><span class="info">Praia da Trindade</span></div>
      <div><img id="motion6" class="motion" src="./c6.jpg"><span class="info">Porto de Galinhas</span></div>
  
    </div>

  </body>
</html>

赞(0）回复(0）举报 2023-02-12

inn6fuwd2#

如果我没理解错你的问题，我想这就是你想要的。
1.我将把.motion移到img的父元素和span.info的父元素中，这样就很容易通过this选择img和它们的.info。

show函数将仅显示1张图片，具体取决于i。
1.当用户点击img时，$('.motion').on('click' ...将显示和隐藏.info。
$('button').on('click' ...将交换img和.info。

function show(i) {
  $(`.motion:nth-of-type(${i})`).show()
  $(`.motion:not(:nth-of-type(${i}))`).hide()
}

let img_num = 1
let motion_len = $('.motion').length
$(() => {
  $('.info').hide()
  show(img_num)
  $('.motion').on('click', function() {
    $('.info', this).fadeToggle()
  })
  $('button').on('click', function() {
    $('.info').hide()
    let btn = $(this).attr('class')
    if (btn === 'next') {
      img_num += 1
    } else if (btn === 'previous') {
      img_num -= 1
    }
    img_num = img_num < 1 ? 6 : img_num > 6 ? 1 : img_num
    show(img_num)
  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="motion"><img src="./c1.jpg"><span class="info">Copacabana</span></div>
  <div class="motion"><img src="./c2.jpg"><span class="info">Ipanema</span></div>
  <div class="motion"><img src="./c3.jpg"><span class="info">Florianópolis</span></div>
  <div class="motion"><img src="./c4.jpg"><span class="info">Jericoacoara</span></div>
  <div class="motion"><img src="./c5.jpg"><span class="info">Praia da Trindade</span></div>
  <div class="motion"><img src="./c6.jpg"><span class="info">Porto de Galinhas</span></div>
  <button class="previous">Previous</button>
  <button class="next">Next</button>
</div>

赞(0）回复(0）举报 2023-02-12

我来回答

jquery 当用户单击任一按钮时，我希望位置的名称淡入，但无法使用此条件语句

2条答案

相关问题

热门标签

最新问答