Question

有没有一种以更简单的方式编写此代码的方法？下面的代码示例显然使用jQuery，因为它看起来很简单。我确信必须有更好的方法，因为它重复了函数的内容。我感到困惑的是我如何将触发器中的id传递给单个函数。

当然，我意识到这可以通过javascript完成 - 任何关于编码的指针也会非常受欢迎。

由于

这是HTML：

＆＃13;

$(document).ready(function() {
  $('.carImage').hide();
  $('#triggerA').click(function(e) {
    $("#imageA").show();
    $("#imageB").hide();
    $("#imageC").hide();
    $("#imageD").hide();
  });
  $('#triggerB').click(function(e) {
    $("#imageA").hide();
    $("#imageB").show();
    $("#imageC").hide();
    $("#imageD").hide();
  });
  $('#triggerC').click(function(e) {
    $("#imageA").hide();
    $("#imageB").hide();
    $("#imageC").show();
    $("#imageD").hide();
  });
  $('#triggerD').click(function(e) {
    $("#imageA").hide();
    $("#imageB").hide();
    $("#imageC").hide();
    $("#imageD").show();
  });
});

＆＃13;

.item {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 3em;
  padding: 1em;
  margin: 0.5em;
  background-color: #36F;
  color: #FFF;
  width: 75px;
  float: left;
}
.item:hover {
  background-color: #F0C;
}
a {
  text-decoration: none;
  color: #FFF;
}
#selectors {
  overflow: auto;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="selectors">
  <div class="item" id="triggerA">
    A
  </div>
  <div class="item" id="triggerB">
    B
  </div>
  <div class="item" id="triggerC">
    C
  </div>
  <div class="item" id="triggerD">
    D
  </div>
</div>

<img src="http://dummyimage.com/100/ff0" id="imageA" class="carImage" />
<img src="http://dummyimage.com/100/f0f" id="imageB" class="carImage" />
<img src="http://dummyimage.com/100/0ff" id="imageC" class="carImage" />
<img src="http://dummyimage.com/100/0f0" id="imageD" class="carImage" />

＆＃13;

Answer 1

您可以使用.index()和class来简化代码。

$(document).ready(function() {
  $('.carImage').hide();
  $('.item').click(function() {
    $('.carImage').hide().eq($(this).index()).show();
  })
});

.item {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 3em;
  padding: 1em;
  margin: 0.5em;
  background-color: #36F;
  color: #FFF;
  width: 75px;
  float: left;
}
.item:hover {
  background-color: #F0C;
}
a {
  text-decoration: none;
  color: #FFF;
}
#selectors {
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectors">
  <div class="item" id="triggerA">
    A
  </div>
  <div class="item" id="triggerB">
    B
  </div>
  <div class="item" id="triggerC">
    C
  </div>
  <div class="item" id="triggerD">
    D
  </div>
</div>

<img src="http://dummyimage.com/100/ff0" id="imageA" class="carImage" />
<img src="http://dummyimage.com/100/f0f" id="imageB" class="carImage" />
<img src="http://dummyimage.com/100/0ff" id="imageC" class="carImage" />
<img src="http://dummyimage.com/100/0f0" id="imageD" class="carImage" />

Answer 2

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Feature bar demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.carImage').hide();
    $('.item').click(function(e) {
        $('.carImage').each(function(index, img) {
            img.style.display = (img.id.slice(-1) == e.target.id.slice(-1) ? 'inline-block' : 'none')
        });
    });
});
</script>
<style>
	.item	{
		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size:3em;
		padding:1em;
		margin:0.5em;
		background-color:#36F;
		color:#FFF;
		width:75px;
		float:left;
	}
	.item:hover	{
		background-color:#F0C;
	}
	a	{
		text-decoration:none;
		color:#FFF;
	}
	#selectors	{
		overflow:auto;
	}
</style>
</head>

<body>
	<div id="selectors">
        <div class="item" id="triggerA">
        A
        </div>
        <div class="item" id="triggerB">
        B
        </div>
        <div class="item" id="triggerC">
        C
        </div>
        <div class="item" id="triggerD">
        D
        </div>
    </div>
	
		<img src="cars1.jpg" id="imageA" class="carImage">
        <img src="cars2.jpg" id="imageB" class="carImage">
        <img src="cars3.jpg" id="imageC" class="carImage">
        <img src="cars4.jpg" id="imageD" class="carImage">

</body>
</html>

＆＃13;

有没有更简单的方法来编写这段代码？

2 个答案: