如何添加和删除点击GIF？

我正在使用物化来创建可折叠在我的页面上的手风琴。我想在点击可折叠标题时将gif /图像添加到我的页面，并且当可折叠标题再次单击或单击另一个标题时要将它们删除。如何添加和删除点击GIF？

我可以在点击时添加gif，但一直无法弄清楚如何删除它们。我正在使用JavaScript和jQuery。

下面是我的代码：

contentTitles = ["Test1", "Test2", "Test3"]; 
contentLinks = ["test1.gif", "test2.gif", "test3.gif"]; 

$(document).ready(function(){ 
    $('.collapsible').collapsible(); 
    $('main').append('<ul data-collapsible="accordion"></ul>'); 
    $('ul').addClass('collapsible popout'); 

for (var j = 0; j < contentTitles.length; j++) { 
    $('ul').append('<li></li>'); 
    // start the creation of the collapsible 
    $('.collapsible').collapsible({ 
     accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style 
    }); 
    }; 

// create the collapsible 
$('li').append('<div><i></i></div>'); 
$('li').append('<div><span></span></div>'); 
$('i').addClass('material-icons'); 
$('i').parent().addClass("collapsible-header hoverable"); 
$('span').parent().addClass("collapsible-body"); 

// adds the titles to each collapsible header 
$('.collapsible-header').each(function(index) { 
    $(this).html(contentTitles[index]); 
}) 

// adds the gif urls to each collapsible body 
$('.collapsible-header').on('click', function() { 
    $('.collapsible-body').each(function(index) { 
    $(this).html('<iframe class="gif" src=' + contentLinks[index] + '>'); 
    }) 
}) 

$('.collapsible-header').on('click', function() { 
    $('.collapsible-body').html(); 
}) 

}) 
});

谢谢。

来源

2017-09-16 samiam0906

.html（）调用只是返回元素的html内容 - 它不会更改它。如果你想清空元素，这样做：在回复

$('.collapsible-header').on('click', function() { 
    $('.collapsible-body').html(""); //set HTML to be an empty string 
})

来源

2017-09-16 16:36:00

感谢当我设置HTML为空字符串，我可以查看任何人之前，GIF被删除。 – samiam0906

我想你会附加两个点击处理程序 - 其中一个添加gif，另一个会立即删除。我建议只使用一个处理程序，并检查是否有gif要删除，然后可以根据需要添加或删除。 –

如何添加和删除点击GIF？

回答

相关问题