亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

單擊函數更改具有相同類名的所有元素

單擊函數更改具有相同類名的所有元素

PHP
幕布斯6054654 2021-07-05 17:57:29
我有一個在 php 循環中迭代的具有相同類名的 div。每當點擊 more 鏈接時,所有 class='detail-section' 的 div 都會打開和關閉,而不僅僅是循環中選擇的特定 div。我試過 $(this).closest 并且它似乎沒有改變任何東西。要么是因為它不接近或什么的。我想不通。任何幫助是極大的贊賞。foreach($rows as $a => $b){  <div><a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a></div>  <div class='detail-section' style='display: none;'>      <!--Content-->  </div>  <div><a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a></div>}這是我的腳本<script>$(document).ready(function(){  $(".more-detail").click(function(){    $(".detail-section").css("display", "block");    $(".more-detail").css("display", "none");    $(".less-detail").css("display", "block");  });  $(".less-detail").click(function(){    $(".detail-section").css("display", "none");    $(".more-detail").css("display", "block");    $(".less-detail").css("display", "none");  });});</script>
查看完整描述

3 回答

?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

首先,您必須將 html div 更改為以下幾行:


<div>

  <a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a>

    <div class='detail-section' style='display: none;'>

        details details details details details details details details details details 

    </div>

    <a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a>

</div>

然后將您的 jquery 更改為:


       $(".more-detail").click(function(){

            var $this = $(this);

            var $detail = $this.next(".detail-section");

            var $lessDetail = $detail.next(".less-detail");

            $this.css("display", "none");

            $detail.css("display", "block");

            $lessDetail.css("display", "block");

        });


        $(".less-detail").click(function(){

            var $this = $(this);

            var $detail = $this.prev(".detail-section");

            var $moreDetails = $detail.prev(".more-detail");

            $detail.css("display", "none");

            $moreDetails.css("display", "block");

            $this.css("display", "none");

        });


查看完整回答
反對 回復 2021-07-09
?
慕森卡

TA貢獻1806條經驗 獲得超8個贊

使用this與.next()和.prev()方法:


  $(".more-detail").click(function(){

    $(this).next(".detail-section").css("display", "block");

    $(this).next(".less-detail").css("display", "block");

    $(this).css("display", "none");

  });


  $(".less-detail").click(function(){

    $(this).prev(".detail-section").css("display", "block");

    $(this).prev(".more-detail").css("display", "block");

    $(this).css("display", "none");

  });


查看完整回答
反對 回復 2021-07-09
  • 3 回答
  • 0 關注
  • 170 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號