jquery - 显示/隐藏任意数量 ID 的 slider 切换

Question

I looked at this tutorial at w3schools for a jQuery slider toggler and wanted to make one for myself. However, my requirement is a little different. I don't want to rigidly define each CSS style and jQuery function.

例如，在 w3school 的实现中，他们使用了:

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});

但我想做一些这样的事情:

function toggleX(fid,pid){

var flipvar = document.getElementbyId(fid);
var panelvar = document.getElementbyId(pid);

$(document).ready(function(){
    $(flipvar).click(function(){
        $(panelvar).slideToggle("slow");
    });
});

}

我的要求是我应该能够简单地通过这样做在 HTML 中实现这种效果:

<div id="flip" onclick="toggleX('flip','panel');">...</div>
<div id="panel">...</div>
<!-- Similarly for any number of DIVs in same pattern -->
<div id="flip1" onclick="toggleX('flip1','panel1');">...</div>
<div id="panel1">...</div>

如果它能让您更容易看到事物本身，请看下面的代码片段。请查看并提出改进建议。

function toggleX(fid,pid){
		fid.style.background="#fff";//This is for testing purpose but the color never changes :/
}
//IF I could make that^ function work, I am planning to use the function below by using the id-values I get from onclick event

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});

#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="flip" onclick="toggleX('flip','panel');">Only this one works right now(Click me)</div>
<div id="panel">This slider is working only for THIS div and this slider is getting its style from 'panel' and 'flip' CSS. Can I get those CSS attributes by ID?<br/>(for flip1,panel1,flip2,panel2...and so on?)</div>

<div id="flip2" onclick="toggleX('flip2','panel2');">I want to make this DIV slidable show/hide too!</div>
<div id="panel2">And I want to get CSS style from ID too! :/</div>

<!--
I want this to happen for any number of ids that I make and pass with toggleX function.
-->

最后让我再次分解这个问题..

我要:

• 许多 div 的 slider 切换
• 彼此独立但都使用相同的中心函数并从相同的 CSS 派生其样式

我不想:

• 基于类的答案因为I did read this related answer但这并没有回答我的问题。这也不是我想要的。我更喜欢基于 ID 的答案。

  • ...我一定是把它搞砸了，因为我无法让它工作，正如您在下面的代码片段中看到的那样，它可以工作!(虽然不是我们想要的)在 SO 中，但它 refuses to work in jsfiddle这让我担心特定的依赖关系。这不适用于特定设置或平台吗？

    $('.toggler').click(function(evt) {
      var $toggler = $(this);
      var $container = $toggler.siblings('.container');
    
      $container.toggle();
      $toggler.text($container.is(':visible') ? "Hide" : "Show");
      evt.preventDefault();
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <div class="toggleset">
      <a class="toggler" href="#">Hide</a>
      <div class="container">
        Data to show/hide
      </div>
      <br/>
      <a class="toggler" href="#">Hide</a>
      <div class="container">
        Data to show/hide
      </div>
    </div>

• 每个 div 的多个 CSS 因为我不知道将来我会为一个 slider 使用多少个 DIV(好吧，最多 10 个，但我想要干净的 CSS 该死的)

• 多个 ID 的多个函数，因为我将把 jQuery 函数放在我的模板中，然后在我的文章和页面中需要的地方使用 div，正如我之前提到的:

像这样(这是我理想的解决方案):

<div id="flip" onclick="toggleX('flip','panel');">...</div>
<div id="panel">...</div>
<!-- Similarly for any number of DIVs in same pattern -->
<div id="flip1" onclick="toggleX('flip1','panel1');">...</div>
<div id="panel1">...</div>

什么样的解决方案？

• 接受有创意的答案，即使它们不符合我的上述规范。如果你能在类里面做到这一点，那就去做吧!我指出 ID 只是因为我相信通过 ID 解决会很有效。
• 最佳实践:如您所知，我是这方面的新手。如果您知道为此类目的制作切换 slider 的更好做法，我将不胜感激!
• 半路见我:如果您一直在尝试解决这个问题，但也遇到困难，请随时提供答案。与此同时，我会尝试自己解决它。

Answer 1

您可以使用 attribute starts with selector 来实现它和 next()功能，

 $("div[id^=flip]").click(function() {
   $(this).next("div[id^=panel]").stop().slideToggle("slow");
 });

DEMO

我已经按照你上面的方式回答了问题。但是在这种情况下使用通用类是正确的做法。由于具有 id 的元素将在全局范围内为命名访问创建不必要的引用。

 $("div.flipClass").click(function() {
   $(this).next("div.panelClass").stop().slideToggle("slow");
 });

DEMO