Question

如何按照他们点击的顺序显示元素。显示，而不是使用jquery在HTML中显示的顺序？

E.g。

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使用此代码，输出将安排＆＃34; a b c＆＃34;

我想要的是，如果我点击C，B，A，输出应该排列＆＃34; c b a＆＃34;

我已尝试过各种CSS定位规则来做到这一点，但我能做的最好的事情就是让它们安排在彼此相同的位置。我意识到我可以为每个人创建一个新课程，但是为了最小的代码并且我现在正在学习这样做而不愿意这样做，所以知道一个更好的解决问题的方法会很有用。

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

Answer 1

有一个非常简单的技巧：使用.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;
}

Answer 2

您可以执行类似

的操作

$(".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>

注释

使用公共事件处理程序而不是为每个链接使用不同的处理程序
在显示元素之前，目标将移动到父级的最后位置
使用.one（）注册处理程序，以便一个元素只显示一次

Answer 3

将click事件绑定到他们共享的类，而不是他们自己的唯一ID。在clickClosure的功能范围内，这个＆＃39;是指当前的元素。

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

Answer 4

您可以将此代码简化为：

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>

Answer 5

使用样式实现这一目标的范围可能从痛苦到非常困难，具体取决于您希望它们显示的确切方式。我建议改为在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'));
});

正如其他受访者所建议的那样，您也可以通过各种方式优化您的代码，但这超出了问题的范围。

Answer 6

试试这个：您可以将空<p class="output">放入，并从CSS display:none;中移除.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

按点击顺序显示元素

6 个答案: