jQuery的替換，當再次點擊同一類

恢復舊值我有一個css類樣式一些divs，jQuery的替換，當再次點擊同一類

當我點擊這些divs之一，我能夠用新值來代替class。但是，我想要再次單擊div類class =「some_div」時恢復其default值。所以，我想只顯示class =「new_div」一次。

在此先感謝

$(document).ready(function() { 
 

 
    $(".some_div").click(function() { 
 
     var divId = $(this).attr("id"); 
 
     var divVideo = $(this).attr("data-video"); 
 

 
    $(this).replaceWith('<div class="new_div" id="' + divId + '" data-video="' + divVideo + '" > New div </div>'); 
 
    
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="some_div" id="my-video1" data-video="video1.mp4"> 
 
    some div 
 
</div> 
 
<div class="some_div" id="my-video2" data-video="video2.mp4"> 
 
    some div 
 
</div> 
 
<div class="some_div" id="my-video3" data-video="video2.mp4"> 
 
    some div 
 
</div>

來源

2017-02-21 user2983865

你可以在一個數組保存舊值，然後再次retreive上點擊陣列。 – Nicolas

我可以想象的邏輯，但我嘗試了很多事情couldnt存檔。因爲我是新的jquery @Nicolas – user2983865

我會添加一個迴應，我在想什麼給我幾分鐘。 – Nicolas

你的意思是切換它的數據？嘗試這個。

$(document).ready(function() { 
    $(".changeable").click(function() { 
     var _old = $(this).attr("data-content") || "old"; 
     var _new = $(this).html(); 
     $(this).attr("data-content", _new); 
     $(this).html(_old); 
    }); 
})

編輯：這是你的解決方案：https://jsfiddle.net/549oz76d/1/

來源

2017-02-21 13:46:58

我已經厭倦了你的代碼，當再次點擊同一個div時，它恢復了舊值。但我需要的是，當點擊** some_div **顯示** new_div **，當點擊另一個** some_div **恢復** new_div **與舊值.. :) – user2983865

@ user2983865您的請求尚不清楚。 –

對不起，我的英語不完美。你的代碼工作正常，但問題是當我點擊另一** ** some_div **想要恢復** new_div ** ... – user2983865

這裏是我會做，保持在陣列中的信息在電流id的位置和retreive它的第二次點擊。

$(document).ready(function() { 
var oldData = {}; 
$(".some_div").click(function() { 
    var divId = $(this).attr("id"); 
    //Validate if the array contains old data. 
    if(!oldData.hasOwnProperty(divId){ 
     //When using data attribute you can access them using .data() 
     var divVideo = $(this).data("video"); 
     //Save current value in the array at the position of the current id. 
     oldData[divId] = { 
      'divVideo': divVideo, 
      'html': $(this).html() 
     }; 
     //Replace 
     $(this).replaceWith('<div class="new_div" id="' + divId + '" data-video="' + divVideo + '" > New div </div>'); 
    } else { 
     //Replace the old HTML 
     $(this).html(oldData[divId].html); 
     //Replace old Video 
     $(this).data("video", oldData[divId].divVideo); 
    } 
}); 
})

來源

2017-02-21 13:54:31 Nicolas

當我嘗試你的代碼不可點擊沒有什麼好感 – user2983865

我做了一個小提琴，並改變了一些東西https://jsfiddle.net/0c1vubb0/ – Nicolas

首先，你改變了你的div的類，所以它不能訪問了$（'。some_div'）''選擇器，另外，你必須添加你的Jquery偵聽器，因爲它是動態添加的。最後，我決定只替換HTML，因爲我認爲這是你改變的唯一的東西。 – Nicolas

我能用jQuerys切換功能來做到這一點。我不知道這是否是最好的解決方案。

$(document).ready(function() { 
 

 
$(".toggle1").click(function() { 
 
\t $(".some_div1").toggle(); 
 
}); 
 

 
$(".toggle2").click(function() { 
 
\t $(".some_div2").toggle(); 
 
}); 
 

 
$(".toggle3").click(function() { 
 
\t $(".some_div3").toggle(); 
 
}); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toggle1" id="my-video1" data-video="video1.mp4"> 
 
    <div class="some_div1">some div</div> 
 
\t <div class="some_div1" style="display: none">New DIV</div> 
 
</div> 
 
<div class="toggle2" id="my-video2" data-video="video2.mp4"> 
 
    <div class="some_div2">some div</div> 
 
\t <div class="some_div2" style="display: none">New DIV</div> 
 
</div> 
 
<div class="toggle3" id="my-video3" data-video="video2.mp4"> 
 
    <div class="some_div3">some div</div> 
 
\t <div class="some_div3" style="display: none">New DIV</div> 
 
</div>

希望它幫助。

來源

2017-02-21 14:22:34

謝謝你，但我不想用css隱藏它，因爲我想使用視頻播放器，所以它會很沉重 – user2983865

試試這個：

$(function() { 
$(".some_div").click(function() { 
     var divId = $(this).attr("id"); 
     var divVideo = $(this).attr("data-video"); 
     var n = '<div class="new_div" id="' + divId + '" data-video="' + divVideo + '" > New div </div>'; 
     var $old = $(this).attr("data-content") || n; 
     var $new = $(this).html(); 
     $(this).attr("data-content", $new); 
     $(this).html($old); 
}); 
});

來源

2017-02-21 14:45:06

jQuery的替換，當再次點擊同一類

回答

相關問題