我正在尝试编写一个函数，在每次单击按钮时，它会更改三角形的形状。
我是一个新手，我可以用toggle（）更快地做到这一点但是我想要更好地编写函数，因为它阻碍了我。任何帮助，将不胜感激。你没有必要给我答案，但正确的方向上的一点是非常值得赞赏的！谢谢。
我有前两种形状，但我不知道如何引入最后两种形状。
https://jsfiddle.net/gs0c30vd/2/
$(document).ready(function(){
$("#tri").click(function(){
$('#triangleup').hide();
$('#triangleright').show();
}) ;
});
答案 0 :(得分：0)
您可以使用标记isUp来了解当前状态，并在每个click
$(document).ready(function(){
var isUp = true;
$("#tri").click(function(){
if (isUp) {
$('#triangleup').hide();
$('#triangleright').show();
} else {
$('#triangleup').show();
$('#triangleright').hide();
}
isUp = !isUp;
}) ;
});
编辑：
我看到你有四个三角形。如果您想要完整旋转，那么您可能希望这样做：
$(document).ready(function(){
var directions = ["up", "right", "down", "left"];
var directionIndex = 0;
$("#tri").click(function(){
$("#triangle" + directions[directionIndex]).hide();
$("#triangle" + directions[directionIndex = ((directionIndex + 1) % directions.length)]).show();
}) ;
});
答案 1 :(得分：0)
您可以使用Switch语句跟踪0..3中三角形的当前位置，如下所示：
$(document).ready(function() {
var rot = 0
$("#tri").click(function() {
switch (rot) {
case 0:
$('#triangleup').hide();
$('#triangleright').show();
rot += 1;
break;
case 1:
$('#triangleright').hide();
$('#triangledown').show();
rot += 1;
break;
case 2:
$('#triangledown').hide();
$('#triangleleft').show();
rot += 1;
break;
case 3:
$('#triangleleft').hide();
$('#triangleup').show();
rot = 0;
break;
}
});
});
答案 2 :(得分：0)
如果你的html看起来像这样
<div id="container">
<div class="shape visible"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
</div>
你的.shape的css类是display：none和.visible是display：block
比你的js可以
$("#tri").click(function() {
var current = $(".visible");
var options = $("#container");
var index = options.index(current);
$(".visible").removeClass("visible");
If(index<options.length -1){
options[index + 1].addClass("visible");
}else{
options[0].addClass("visible");
}
});
请原谅我在手机上输入的类型。
答案 3 :(得分：0)
$(document).ready(function(){
var count = 0;
$("#tri").click(function(){
if( count == 0)
{
$('#triangleup').hide();
$('#triangleright').show();
count++;
}
else if(count == 1)
{
$('#triangleright').hide();
$('#triangledown').show();
count++;
}
else if(count == 2)
{
$('#triangledown').hide();
$('#triangleleft').show();
count++;
}
else
{
$('#triangleleft').hide();
$('#triangleup').show();
count = 0;
}
}) ;
});
这不是你做这个的好方法
答案 4 :(得分：0)
一种方法是将形状的名称存储在数组中，然后使用某种计数器，每次单击按钮时都会增加。与数组长度相比，该计数器的模数/余数将使您能够遍历它们。
代码示例：
var index = 0
var shapeArr = [
'#triangleup',
'#triangleright',
'#triangledown',
'#triangleleft'
]
var len = shapeArr.length
$(document).ready(function(){
$("#tri").click(function(){
$(shapeArr[index % len]).hide();
$(shapeArr[++index % len]).show();
}) ;
});
答案 5 :(得分：0)
一个非常简单和小巧的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中查看。
这个小方法真正的好处是你不必声明你想要显示的范围内的每个元素。如果你将它应用于带有大量图像的滑块，那么输入每个元素都会很烦人（至少在我看来）;特别是如果你改变了一些元素。为了使这个方法更容易维护，你可以使用一些固定的类，你总是把它作为第一个和最后一个元素;例如"firstTriangle"和"lastTriangle"，然后相应地调整变量。我还在脚本和HTML中添加了这种方法，以供将来参考和易用。
然而，还应注意缺点：
然而，关于单向＆＃34;缺点＆＃34;您可以轻松地反转该功能并添加另一个按钮来弥补这一点。这样的例子可以在这里看到：
Change slides/elements in both directions。
这有效地为您提供了一个功能齐全的滑块。
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()）这个。
但是，如果最后一个元素是可见的（那么你在范围的末尾），手动隐藏它并显示第一个元素 - 从而重新开始范围。
注意：请原谅我冗长的答案（虽然这可能不是一件坏事）但这对我来说也是一个学习过程 - 我甚至不知道＆＃ 34;幻灯片＆＃34;使用jQuery可以很容易地实现这一点，直到找到与此问题相关的.filter()参数。
答案 6 :(得分：0)
您可以使用CSS中的几行和jQuery代码中的一小部分添加替代解决方案。关键是只需使用CSS转换属性旋转三角形。
使用jQuery的示例
$(document).ready(function() {
var degrees = 0;
$("#tri").click(function() {
degrees = degrees + 90;
$('#triangle').css("transform", "rotate(" + degrees + "deg)");
});
});#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="triangle"></div>
<br>
<button id="tri">Click me to change the direction of the triangle</button>
您还可以在此更新的Fiddle中查看此内容。
仅使用Javascript的示例
var degrees = 0;
var triangle = document.getElementById("triangle");
document.getElementById("tri").addEventListener("click", function() {
degrees = degrees + 90;
var style = triangle.style;
style.transform = "rotate(" + degrees + "deg)";
});#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}<div id="triangle"></div>
<br>
<button id="tri">Click me to change the direction of the triangle</button>