javascript - 无法使用 JQuery 功能切换图像

Question

我正在尝试编写一个函数，每次单击按钮时，它都会改变三 Angular 形的形状。

我是一个新手，我可能可以使用toggle()更快地做到这一点，但我想更好地编写函数，因为它阻碍了我。任何帮助，将不胜感激。您不必给我答案，但如果您能指出正确的方向，我将不胜感激!谢谢。

我有前两个形状，但我不知道如何引入后两个。

https://jsfiddle.net/gs0c30vd/2/

$(document).ready(function(){
    $("#tri").click(function(){
        $('#triangleup').hide();
        $('#triangleright').show();

    }) ; 
});

Answer 1

一个非常简单和小的 jQuery 脚本可以像下面这样完成它 - 唯一的要求是您将相同的类添加到元素中(参见下面的 HTML):

$(document).ready(function(){

// declare the first element in the range w. respect to the order of the HTML
var firstElement = $(".firstTriangle");
// declare the last element in the range here to reset the "loop" of elements
var lastElement = $(".lastTriangle");

$("#tri").click(function() {
  if ($(lastElement).is(":hidden")){
    $(".triangle").filter(":visible").hide().next().show();
} else {
$(lastElement).hide();
$(firstElement).show();
};
});

 // ------------------------------------------------------------
 // The original uni-directional method is above. 
 // Beneath I have added "support" for a bi-directional method; 
 // i.e. going either up or down in the HTML
 // ------------------------------------------------------------

$("#counterclockwise").click(function() {
  if ($(firstElement).is(":hidden")){
    $(".triangle").filter(":visible").hide().prev().show();    
} else {
$(firstElement).hide();
$(lastElement).show();
};
});

});

您可以在this fiddle查看。

这个小方法的真正好处是您不必声明您想要显示的范围内的每个元素。如果您将其应用于包含大量图像的 slider ，则输入每个元素会变得很烦人(至少在我看来)；尤其是如果你改变了一些元素。为了使这个方法更容易维护，你可以只使用一些固定的类，你总是将它们作为第一个和最后一个元素；例如 "firstTriangle" 和 "lastTriangle"，然后相应地调整变量。我还在脚本和 HTML 中添加了这种方法，以供将来引用和易于使用。

但也应注意其缺点:

• 您必须将希望在没有其他同级元素的容器内切换的元素(如 HTML 中所示)。否则它将移动到其他元素并显示/隐藏这些元素，从而破坏该功能。
• 元素之间的切换只能有一个方向(在 HTML 文档中向下)。

但是，对于单向“缺点”，您可以轻松地反转该功能并添加另一个按钮来弥补这一点。这样的例子可以在这里看到:
Change slides/elements in both directions .

这实际上为您提供了一个几乎功能齐全的 slider 。

HTML:

  <div class="myContainer"> 
  <div id="triangleup" class="triangle firstTriangle"></div>
  <div id="triangleright" style="display: none;" class="triangle"></div>
  <div id="triangledown" style="display: none;" class="triangle"></div>
  <div id="triangleleft" style="display: none;" class="triangle lastTriangle"></div>
  </div>

<button id="tri">Click me to change the direction of the triangle</button>

<!-- Button for changing direction beneath -->

<button id="counterclockwise">Change direction <b>counter-clockwise</b></button>

函数解释:
如果范围中的最后一个元素被隐藏(我们还没有遍历范围)，则找到可见的元素(.filter(":visible"))并隐藏它，然后找到它的下一个(next()) 兄弟并显示 (show()) this。但是，如果最后一个元素可见(那么您位于范围的末尾)，请手动隐藏它并显示第一个元素 - 从而重新开始范围。

注意:请原谅我冗长的回答(尽管这可能不是一件坏事)，但这对我来说也是一个学习过程 - 我什至没有意识到“幻灯片”有效可以使用 jQuery 变得如此简单，直到我找到与此问题相关的 .filter() 参数。