改變顯示樣式：block;

-3

我有一個Rails應用程序，它有一些<li>元素，樣式爲display: none; CSS屬性。我只想在拖動該元素時使其顯示在頁面上。但有些元素不要有display: none;風格。我該怎麼做？改變顯示樣式：block;

以下是我的HTML代碼：

<div class="col-xs-12 col-md-6 col-lg-3"> 
          <li id="<%=video_upload.id %>" <% if video_upload.invisible == true %> <%= "style=display:none;" %> <%end%> > 
           <% if mobile? %> 
            <a href="<%= showvideo_path(video_upload.id) %>"> 
             <div style="background-color: white"> 
              <%= image_tag("/images/upload_images/"+"#{video_upload.imagename}", height: '130', width: '200') %> 
             </div> 
            </a> 
           <% else %> 
            <div style="background-color: white"> 
             <img src="<%= '/images/upload_images/'+"#{video_upload.imagename}" %>" class="img-responsive" style="cursor:pointer" onclick="popVideo('https://app.box.com/embed/s/<%= video_upload.link[/([^\/]+)$/] %>');" > 
            </div> 
           <% end %> 

           <span style="float: left"> 
            <%= File.basename(video_upload.imagename, '.*') %> 

           </span> 

           <span style="float: right"> 

            <%= link_to '', edit_video_uploads_path(video_upload), {class: 'btn btn-primary glyphicon glyphicon-pencil', :style => 'color: white'} %> 

            <%= button_tag(:del_flag => 'button', :id => video_upload.id ,:class => 'btn btn-danger user-approve-btn glyphicon glyphicon-trash') do 
            "" 
            end %> 
           </span> 
          </li> 
         </div>

我使用this的JavaScript 拖放。

來源

2017-05-29 ruby Rails

分享您的html代碼 –

你怎麼能拖動一個不可見的元素？ – guradio

嘿夥計，我們需要看到你的完整的html代碼，否則我們將無法猜測你的頁面中有什麼。 –

選擇所有<li>元素，並在拖動時顯示它們。然後拖動結束時隱藏起來：

document.querySelectorAll('li').forEach(li => { 
    // Show the <li> on drag 
    li.addEventListener('dragstart', event => { 
     event.target.style.display = 'block'; 
    }); 

    // Hide each <li> back 
    li.addEventListener('dragleave', event => { 
     event.target.style.display = 'none'; 
    }); 
});

這是使用原生HTML5拖放功能，你可以在this博客文章中看到。讓我知道它是否按你的意圖工作。

UPDATE：

在要像你說的，選擇1元的情況下，你只需要在元素添加一個id="myElement"，然後選擇它，像這樣：

let element = document.querySelector('#myElement'); 

element.addEventListener('dragstart', event => { 
    event.target.style.display = 'block'; 
}); 
element.addEventListener('dragleave', event => { 
    event.target.style.display = 'none'; 
});

來源

2017-05-29 06:04:18

非常感謝。我有一個問題。如果我只需要展示和隱藏我想要的那些元素，而不是全部。 –

要明確一點，我只有一個元素具有'display：none;'屬性。我只需要在拖動事件中取消隱藏它，並在放置事件後隱藏。我很抱歉不清楚我的問題。 –

然後用'document.querySelectorAll'選擇這些元素併爲每個'dragstart'和'dragleave'應用相同的事件。你可以在你的html中添加一個類到像'class =「example」'這樣的元素，然後用'document.querySelectorAll（'。example'）'選擇它們，然後你就可以應用這些事件。 –

改變顯示樣式：block;

回答

相關問題