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隐藏和显示功能不适用于所有滑块

回答

相关问题