大编辑:更新了代码部分,但问题保持不变。
我可能遇到了一个独特的 jQuery 问题,我需要一些帮助。
我有一个函数(工作完美),看起来像这样......
var openslide1 = function() {
$("#slide1").animate({
left: "+=250px",
}, 400, function() {
// Animation complete.
});
$(this).unbind('click', openslide1); \\ to prevent from pushing slide over too many times
};
$("#openslide1").click(openslide1);
我的问题是幻灯片的数量可能是无限的,因此“openslides”。每个“openslide”选择器都对应其自己独特的幻灯片。 (例如#openslide2将打开#slide2并解除绑定(bind)#openslide2...依此类推)。
那么如何将它们组合成一个变量和函数?
作为旁注...我还想在单击另一个事件时“重新绑定(bind)”#openslide。目前,我可以通过这个一次完成一个......
$("#closeslide1").click(function() {
$("#slide1").animate({
left: "-=250px",
}, 500, function() {
// Animation complete.
});
$('#openslide1').click(openslide1); \\ rebinds openslide1
});
但是一旦这成为一个组合函数,我假设“openslide1”将不再是该函数的变量。那么,当单击 #closeslide 时,如何重新绑定(bind)该单击事件。 (显然我也将使用这个问题的第一部分来应用 closeslide 变量。)
<div class="section">
<a class="edit-btn" id="openslide1" href="#null">edit</a>
<a class="edit-btn" id="openslide2" href="#null">edit</a>
<a class="edit-btn" id="openslide3" href="#null">edit</a>
<a class="edit-btn" id="openslide4" href="#null">edit</a>
</div>
<div class="slide" id="slide1">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide1" class="btn btn-primary">Submit</a> <a id="closeslide1" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide2">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide2" class="btn btn-primary">Submit</a> <a id="closeslide2" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide3">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide3" class="btn btn-primary">Submit</a> <a id="closeslide3" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide4">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide4" class="btn btn-primary">Submit</a> <a id="closeslide4" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
请帮忙!
谢谢!
最佳答案
我会尝试一下,这对您的可移植性有帮助吗?
$(".openslide1").click(function() {
openSlide(".slide1", "body", 400, ".openslide1");
});
function openSlide(target, bodyObj, speed, original) {
$(target).animate({
left: "+=250px",
}, speed, function() {
// Animation complete.
});
$(bodyObj).animate({
marginLeft: "+=250px",
}, speed, function() {
// Animation complete.
});
$(original).unbind('click');
}
关于javascript - 将顺序 jQuery 选择器组合成单个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13093794/