再次单击同一类时，jQuery替换为并还原旧值

Question

我有一个 css类，可以样式一些divs，

当我单击这些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>

Answer 1

您是指切换其数据吗？尝试一下。

$(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/

Answer 2

这是我要做的，将信息保留在当前ID的位置的数组中，然后在第二次点击时重新删除。

$(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);
    }
});
})

Answer 3

我能够使用jquerys切换函数来完成。我不知道这是否是最好的解决方案。

$(document).ready(function() {
$(".toggle1").click(function () {  
	$( ".some_div1" ).toggle();
});
$(".toggle2").click(function () {  
	$( ".some_div2" ).toggle();
});
$(".toggle3").click(function () {  
	$( ".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>
	<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>
	<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>
	<div class="some_div3" style="display: none">New DIV</div>
</div>

希望它能有所帮助。

Answer 4

尝试以下：

$(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);
 });
});