用於交換元素的JQuery

我的PHP腳本創建一個包含多行項目的表。列1中的每一行顯示emptybox.jpg，最後一列是一個錨鏈接，選擇在該行的項目：用於交換元素的JQuery

output .= '<a href="./select_item.php id=select'.$product['id'].'"></a>'; 
output .= '<a href="./deselect_item.php id=deselect'.$product['id'].' style.display='"none"'"></a>';

（注意，樣式是行內包括剛剛爲這個職位 - 所有樣式居住在一個外部的CSS，我使用類=默認隱藏所有取消選擇錨）

當一個錨點被點擊（項目被選中）我想jquery交換emptybox.jpg爲checkmark.jpg，並交換「選擇「錨點的錨點。理想情況下，這些應該是切換，所以相反也會起作用（單擊DeSelect將隱藏checkmark.jpg和DeSelect錨點，並將重新顯示emptybox.jpg和Select錨點）。

每行圖標都由一個標籤標識，並添加了productID編號。

output .='<div class="checked" id="chk'.$product['id'].'"><img="checkmark.jpg" /></div>'; 
output .='<div class="empty" id="mt'.$product['id'].'" .style.display="none"><img="emptybox.jpg" /></div>';

jQuery代碼必須確定其中「選擇」被點擊錨標記，以便它可以顯示/隱藏相應的元素對（emptybox.jpg/checkmark.jpg，並選擇/取消錨）。這是我到目前爲止有：

<script type="text/javascript"> 
$(function() { 
$("a").click(function(){ 
    $("#mt").hide(); 
    $("#chk").show(); 
    }); 
});

來源

2011-03-24 user674073

你能後幾排的實際HTML？沒有看到HTML結構，很難給你有用的jQuery。

編輯：好的。使用CSS的力量來簡化任務。我平時做這樣的事情：

添加這些CSS樣式：

tr td.artchek div.empty, tr td.arthref div.a_sel 
{ display: block; } 
tr.selected td.artchek div.empty, tr.selected td.arthref div.a_sel 
{ display: none; } 
tr td.artchek div.checked, tr td.arthref div.a_desel 
{ display: none; } 
tr.selected td.artchek div.checked, tr.selected td.arthref div.a_desel 
{ display: block; }

這jQuery的：

$('td.artchek a').click(function() { 
    $(this).closest('tr').toggleClass('selected'); 
});

來源

2011-03-24 20:26:06 Brandon

編輯原始文章會使文章太長，所以我發佈了在此生成HTML的函數（拖動水平視圖分隔符以便您可以看到完整的函數）：http://jsfiddle.net/a7fxj/ – user674073 2011-03-24 21:39:36

您可以使用這樣的事情：

<div class=line> 
    <a href="./select_item.php" class="select"></a> 
    <div class="empty"><img src="emptybox.jpg" /></div> 
</div>

的javascript：

$(".line").click(function(){ 
    var link = $(this).find("a"); 
    var checkbox = $(this).find("div"); 

    link.toggleClass("select"); 
    link.toggleClass("deselect"); 
    if(link.hasClass("select")) { link.attr("href","./select_item.php"); } 
    else { link.attr("href","./deselect_item.php"); } 

    checkbox.toggleClass("empty"); 
    checkbox.toggleClass("checked"); 
    if(checkbox.hasClass("empty")) { checkbox.find("img").attr("src","emptybox.jpg"); } 
    else { checkbox.find("img").attr("src","checkmark.jpg"); } 
}

這會切換類和屬性。這些變量不是絕對必要的，但它確實使代碼更易於讀取和寫入。

來源

2011-03-24 20:38:38 gailbear

用於交換元素的JQuery

回答

相關問題