按点击顺序显示元素

我怎样才能让元素按它们被点击的顺序显示，而不是它们在使用jQuery显示在HTML中的顺序？按点击顺序显示元素

例如

CSS代码：

.sq{ 
    display:none; 
}

HTML代码：

<a href="#" id="1">A</a> 
<a href="#" id="2">B</a> 
<a href="#" id="3">C</a> 

<span class="sq" id="01">a</span> 
<span class="sq" id="02">b</span> 
<span class="sq" id="03">c</span>

JavaScript代码：

$("#1").click(function(){ 
    $("#01").show(); 
}); 

$("#2").click(function(){ 
    $("#02").show(); 
}); 

$("#3").click(function(){ 
    $("#03").show(); 
});

使用此代码，如果我点击C，B，A的输出将安排“ abc“

我w应该是如果我点击C，B，A的输出应该安排“cba”

我试过各种CSS定位规则来做到这一点，但我能做的最好的是让他们安排在每个相同的位置其他。我意识到我可以为每个类创建一个新的类，但是为了最小代码的利益，我宁愿不这样做，我现在正在学习，所以了解解决这个问题的更好方法会很有用。

这里有一个小提琴：http://jsfiddle.net/xuxsuagg/4/

来源

2014-11-21 Farang

可以简化此代码：

var a = document.getElementsByTagName('a'); 
 

 
for (i = 0; i < a.length; i++) { 
 
    a[i].addEventListener('click', function() { 
 
    var span = document.createElement('span'); 
 
    var text = document.createTextNode(this.innerHTML + " "); 
 
    span.appendChild(text); 
 
    document.getElementsByClassName('output')[0].appendChild(span); 
 
    }) 
 
}

a { 
 
    text-decoration: none; 
 
} 
 
.sq { 
 
    display: none; 
 
}

<a href="#" id="1">A</a> 
 
<a href="#" id="2">B</a> 
 
<a href="#" id="3">C</a> 
 
<a href="#" id="4">D</a> 
 
<a href="#" id="5">E</a> 
 
<a href="#" id="6">F</a> 
 

 
<p class="output"> 
 

 
</p>

来源

2014-11-21 07:32:20

这是我最喜欢的答案，因为它完全符合我的需求，这是我的错，没有其他人的，但点击AAACCCBBB也应该显示相同的输出，这段代码甚至不需要我提问。这很好，但是也要感谢所有其他人。 – Farang 2014-11-21 07:44:29

绑定click事件，他们分享，而不是他们自己的唯一ID的类。在clickClosure的函数范围中，this指的是当前元素。

$(".sq").click(function clickClosure(){ 
    $(this).show(); 
});

来源

2014-11-21 07:31:07

有一个很简单的把戏：用.append()。当附加DOM中已经存在的选定元素时，实际上是在移动它。另外，我建议来优化你的代码，你可以：

使用的<a>元素
分配了一个HTML5 data-属性的通用类，说data-target，指定其预定目标的ID
听点击触发的通用类

所提出的新的标记示例事件：

<a href="#" class="sq-click" data-target="01">A</a> 
<a href="#" class="sq-click" data-target="02">B</a> 
<!-- and more -->

这里是代码（和演示小提琴这里 - http://jsfiddle.net/teddyrised/xuxsuagg/9/）

$('.sq-click').click(function(e) { 
    // Prevent default action 
    e.preventDefault(); 

    // Use .append() to move element 
    var $out = $('.output'); 
    $out.find('#'+$(this).attr('data-target')).appendTo($out).show(); 
});

在一个侧面说明，如果你不希望用户重新排列顺序的锚点被点击后，您将不得不依靠.one()方法来收听点击事件。此外，它会帮助你适当的样式残疾人锚使用户可以看到它，看到证据的概念演示：http://jsfiddle.net/teddyrised/xuxsuagg/26/

$('.sq-click').one('click', function(e) { 
    // Prevent default action 
    e.preventDefault(); 

    // Use .append() to move element 
    var $out = $('.output'); 
    $out.find('#'+$(this).attr('data-target')).appendTo($out).show(); 

    // Add class to change appearance of disabled <a> 
    $(this).addClass('disabled'); 
});

而且你的CSS可以是这样的：

.disabled { 
    cursor: default; 
    opacity: 0.2; 
}

来源

2014-11-21 07:31:23 Terry

你可以这样做

$(".myclass").one('click', function() { 
 
    $($(this).data('target')).appendTo('.output').show(); 
 
});

a { 
 
    text-decoration: none; 
 
} 
 
.sq { 
 
    display: none; 
 
} 
 
.output {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#" id="1" class="myclass" data-target="#01">A</a> 
 
<a href="#" id="2" class="myclass" data-target="#02">B</a> 
 
<a href="#" id="3" class="myclass" data-target="#03">C</a> 
 
<a href="#" id="4" class="myclass" data-target="#04">D</a> 
 
<a href="#" id="5" class="myclass" data-target="#05">E</a> 
 
<a href="#" id="6" class="myclass" data-target="#06">F</a> 
 

 
<p class="output"> 
 
    <span class="sq" id="01">A</span> 
 
    <span class="sq" id="02">B</span> 
 
    <span class="sq" id="03">C</span> 
 
    <span class="sq" id="04">D</span> 
 
    <span class="sq" id="05">E</span> 
 
    <span class="sq" id="06">F</span> 
 
</p>

注

用于代替使用不同的处理程序为每个链路的公共事件处理程序
之前所示的目标被移动到父的最后位置处的元素
使用。一（）注册该处理程序，以便显示一个元素只有一次

来源

2014-11-21 07:31:38

使用样式实现此操作可能会从痛苦到非常困难，具体取决于您希望显示的确切方式。我建议，而不是在DOM中重新排序它们。这可能是这个样子：

<a id="link-1">...</a> 
... 
<div style="display: none" id="hidden-items"> 
    <span id="item-1">...</span> 
</div> 
<div id="visible-items"></div>

$('#link-1').click(function() { 
    $('#visible-items').append($('#item-1')); 
});

至于其它受访者提出，也可以优化各种方式你的代码，但是这是问题的范围之外。

来源

2014-11-21 07:38:33 hon2a

试试这个：你可以把空的<p class="output">和删除display:none;从CSS .sq{..。在jQuery中，点击链接的基础上创建一个<span>并追加到<p class="output">

HTML：

<a href="#" id="1">A</a> 
<a href="#" id="2">B</a> 
<a href="#" id="3">C</a> 
<a href="#" id="4">D</a> 
<a href="#" id="5">E</a> 
<a href="#" id="6">F</a> 

<p class="output"> 

</p>

CSS：

.sq{ 
/*display:none;*/ 
color: green; 
margin-right: 10px; 
}

jQuery的

$("a[href='#']").click(function(e){ 
    e.preventDefault(); 
    var text = '<span class="sq" id="0'+$(this).prop('id')+'">' 
      +$(this).text()+'</span>'; 
    $(text).appendTo('p.output'); 
});

DEMO

来源

2014-11-21 07:45:13

按点击顺序显示元素

回答

相关问题