Question

HTML：

<nav id="sales-countries">
  <ul>
    <li><a href="#">...1...</a></li>
    <li><a href="#">...2...</a></li>
    <li><a href="#">...3...</a></li>
    <li><a href="#">...4...</a></li>
    <li><a href="#">...5...</a></li>
    <li><a href="#">...6...</a></li>
    <li><a href="#">...7...</a></li>
  </ul>
</nav>

<nav class="sales-location">...1...</nav>
<nav class="sales-location">...2...</nav>
<nav class="sales-location">...3...</nav>
<nav class="sales-location">...4...</nav>
<nav class="sales-location">...5...</nav>
<nav class="sales-location">...6...</nav>
<nav class="sales-location">...7...</nav>

使用Javascript：

$("nav.sales-location").hide();

$("#sales-countries a:eq(0)").click(function() {
  $("nav.sales-location").hide();
  $("nav.sales-location:eq(0)").show();
});

$("#sales-countries a:eq(1)").click(function() {
  $("nav.sales-location").hide();
  $("nav.sales-location:eq(1)").show();
});

$("#sales-countries a:eq(2)").click(function() {
  $("nav.sales-location").hide();
  $("nav.sales-location:eq(2)").show();
});

$("#sales-countries a:eq(3)").click(function() {
  $("nav.sales-location").hide();
  $("nav.sales-location:eq(3)").show();
});

$("#sales-countries a:eq(4)").click(function() {
  $("nav.sales-location").hide();
  $("nav.sales-location:eq(4)").show();
});

$("#sales-countries a:eq(5)").click(function() {
  $("nav.sales-location").hide();
  $("nav.sales-location:eq(5)").show();
});

$("#sales-countries a:eq(6)").click(function() {
  $("nav.sales-location").hide();
  $("nav.sales-location:eq(6)").show();
});

我需要，具体数字的元素 - 按钮，显示特定数字的元素。

上面的JavaScript代码具有此属性并且运行良好，但它太长了。

如何为（例如）100个按钮和元素创建此属性以便JavaScript代码非常短？

代码段落之间只有两个数字不同！

Answer 1

将其简化为：

$("nav.sales-location").hide();
$("#sales-countries a").click(function() {
    $("nav.sales-location").hide();
    $("nav.sales-location:eq("+$(this).index('#sales-countries a')+")").show();
});

<强> jsFiddle example

您可以将选择器传递给.index()以指定它相对于哪个集合。

Answer 2

由于您只是显示与点击的a相同的文字，因此您可以使用.text()获取值并将其传递给名为.sales-location的空div

$("#sales-countries a").click(function() {
  var results = $(this).text();
  $(".sales-location").html(results);
});

JSFIDDLE

Answer 3

试试这个：

var $locations = $("nav.sales-location").hide();

$("#sales-countries a").click(function () {
    $locations.hide().filter(":eq(" + $(this).parent().index() + ")").show();
});

演示：http://jsfiddle.net/bZLqR/1/

Answer 4

您可以通过每个li点击的常用功能来执行此操作，您可以通过jquery显示相应的div index()

试试这个：

$("nav.sales-location").hide();

$("#sales-countries ul li").click(function() {
    ind = $(this).index();//get the li index
  $("nav.sales-location").hide();// hide all divs
  $("nav.sales-location:eq("+ind+")").show(); //show corresponding index div
});

live demo

Answer 5

我最近做过这样的事情。即使使用Jquery也可以这样做。

var array = [ 1,2,3,4,5 ]
var list = document.getElementById('some-id');

function links(){  // generate links
    for (var i in array){
        var val = array[i];
        var li = document.createELement('li');
        li.innerHTML = "<a href='#'>" + val + "</a>"
        li.onclick = show;
        li.index = i;  // save the array index for later
        list.appendChild(li);
    }
}

function show(e){
    var index = e.target.index || -1 ;
    var toShow = document.getElementsByClassName('class-name');
    // hide all
    for (var i  in toShow){
        toShow[i].style.visibility = 'hidden';
    }
    // show the one I want.
    if (toShow.length < index && index >= 0){
        toShow[index].style.visibility = 'visible';
    }
}

links(); // build the links.

使用特定按钮显示特定元素

5 个答案:

演示：http://jsfiddle.net/bZLqR/1/