我看了w3schools上的一个jQuery滑动切换教程，并想为自己做一个。然而，我的要求有些不同。我不想严格定义每个CSS样式和jQuery函数。
例如，在w3school的实现中，他们使用了：
但我想要做到这样的效果：
如果让你更容易看到事物本身，下面是代码片段，请查看并提出改进建议。
例如，在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添加滑块开关
- 每一个div 相互独立，但是都使用同一个中央函数，并从相同的CSS中获取样式
我不想要：
Class-based answer because I did read this related answer but that did not answer my question. Neither was it quite what I was looking for. I would prefer an ID-based answer.
- ...and I must have messed it up because I could not get it to work, as you can see in the snippet below, it works!(although not as desired) in SO, but it refuses to work in jsfiddle which worries me about specific dependencies. Will this not work with specific settings or platforms?
$('.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>
- ...and I must have messed it up because I could not get it to work, as you can see in the snippet below, it works!(although not as desired) in SO, but it refuses to work in jsfiddle which worries me about specific dependencies. Will this not work with specific settings or platforms?
multiple CSS for each div because I dont know how many DIVs I'll be using for a slider in the future (okay maybe 10 at most but I want clean CSS dammit)
- multiple functions for multiple IDs because I'm going to put the jQuery function in my template and then use the div wherever required in my posts and pages, as I mentioned earlier:
<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来解决会更有效。
- 最佳实践：正如你所看到的，我是一个新手。如果你知道一些更好的方法来制作这样的切换滑块，我将非常感激！
- 相互协作：如果你一直在尝试解决这个问题，但也卡在某个地方，请随时提供答案。与此同时，我也会尽力自己解决。