JQuery隱藏和顯示功能不適用於所有滑塊

我正在使用3個滑塊，當我加載第一個滑塊文本1時顯示另外兩個文本都隱藏起來。就像明智的我寫了剩餘的兩個滑塊但功能僅在每次運行時才工作第三個滑塊滑塊3個功能只能工作。JQuery隱藏和顯示功能不適用於所有滑塊

<script> 
$(document).ready(function() { 
    <!--- slider 1 ----> 

    $("#slide1").load("/startup.php#Screenshots", function() { 

     $(".arc111").show(); 
     $(".arc112").hide(); 
     $(".arc113").hide(); 
    }); 

    <!--- slider 2 ---->  

    $("#slide2").load("/startup.php#Screenshots/slide2", function() { 

     $(".arc112").show(); 
     $(".arc111").hide(); 
     $(".arc113").hide(); 

    }); 

    <!--- slider 3 ----> 

    $("#slide3").load("/startup.php#Screenshots/slide3", function() { 

     $(".arc113").show(); 
     $(".arc112").hide(); 
     $(".arc111").hide(); 

    }); 

}); 
</script> 



<p class="arc111"> text1</p> 
<p class="arc112"> text2</p> 
<p class="arc113"> text3</p>

來源

2016-08-17 Manoj Kumar

在您加載所有幻燈片的$(document).ready。即它將加載slide1，slide2和slide3。所以每次都會看到第三張幻燈片。更改您的代碼以觸發每個滑塊的加載事件。像 -

$(document).ready(function() { 

    $(".arc111").show(); 
    $(".arc112").hide(); 
    $(".arc113").hide(); 

    $("#slide1").click(function() { 
     $("#slide1").load("/startup.php", function() { 
      $(".arc111").show(); 
      $(".arc112").hide(); 
      $(".arc113").hide(); 
     }); 
    }); 

    $("#slide2").click(function() { 
     $("#slide2").load("/startup.php", function() { 
      $(".arc112").show(); 
      $(".arc111").hide(); 
      $(".arc113").hide(); 
     }); 
    }); 

    $("#slide2").click(function() { 
     $("#slide3").load("/startup.php", function() { 
      $(".arc113").show(); 
      $(".arc112").hide(); 
      $(".arc111").hide(); 
     }); 
    }); 
});

編輯

我已經檢查您的評論中提到的網站。我認爲你想要做的是，當用戶點擊下一個和prev圖標你想要顯示並隱藏相應的div。

使用下面的代碼來做到這一點。

$(document).ready(function() { 

    $(".arc111").hide(); 
    $(".arc112").hide(); 
    $(".arc113").hide(); 

    $('body').on('click', '.fp-next', function() { 
     changeText(); 
    }); 

    $('body').on('click', '.fp-prev', function() { 
     changeText(); 
    }); 

    function changeText(){ 
     $(".arc112").hide(); 
     $(".arc111").hide(); 
     $(".arc113").hide(); 
     switch ($(".fp-slidesContainer .active").prop("id")) { 
      case "slide1": 
       $(".arc111").show(); 
       break; 
      case "slide2": 
       $(".arc112").show(); 
       break; 
      case "slide3": 
       $(".arc113").show(); 
       break; 
      default: 
     } 
    } 
});

來源

2016-08-17 06:00:35

我要改變這一點，你提及，但現在它來了3個文本一起 –

@ManojKumar：可能是你因此未設定在能見度加載時間。我編輯了代碼。請檢查 –

Aneesh Sivaraman我正在使用您的編輯代碼，現在它的工作只是第一個文本 –

我瞭解你的代碼是在讀取時加載的頁面，它加載＃滑件，然後＃滑件，然後＃滑件3 ... 不知道你想幹什麼，但是，也許你會更喜歡處理div上的事件，然後加載它們。所以

$("#slide1").click(function() { 
    $("#slide1").load(....

來源

2016-08-17 05:49:08

你也沒有必要把事件裏面的$（document）。就緒 –

JQuery隱藏和顯示功能不適用於所有滑塊

回答

相關問題