按點擊順序顯示元素

我怎樣才能讓元素按它們被點擊的順序顯示，而不是它們在使用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

按點擊順序顯示元素

回答

相關問題