Элементы отображения в порядке щелчка

Question

Как я могу использовать элементы .show в том порядке, в котором они были нажаты, а не в порядке, в котором они отображаются в HTML, используя jquery?

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 выход устроят " abc "

Что я wou ld нравится, если я нажимаю C, B, A вывод должен устраивать «cba»

Я пробовал различные правила позиционирования CSS, чтобы сделать это, но самое лучшее, что я могу сделать, - это устроить их в том же положении, что и каждый Другие. Я понимаю, что могу сделать новый класс для каждого, но не хотел бы этого делать в интересах минимального кода, и сейчас я учусь, поэтому было бы полезно узнать, как лучше решить проблему.

Вот скрипка: http://jsfiddle.net/xuxsuagg/4/

Answer 1

Вы можете упростить этот код:

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 2

Bind щелчок событие для класса, который они разделяют, а не свой собственный уникальный идентификатор. В области функций clickClosure «this» ссылается на текущий элемент.

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

Answer 3

Существует очень простой трюк: используйте .append(). Когда вы добавляете выбранный элемент, который уже присутствует в DOM, вы фактически перемещаете его. Кроме того, я рекомендую, чтобы оптимизировать код, вы можете:

• Используйте общий класс для <a> элементов
• присвоению атрибут HTML5 data-, скажем data-target, чтобы указать идентификатор из намеченной цели
• Прослушайте нажмите событие, инициированное на общем классе

пример предлагаемой новой разметки:

<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 4

Вы можете сделать что-то вроде

$(".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 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"> и удалить 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