我們可以操縱已淡出的元素嗎？

Question

我有一些按鈕默認淡出，只有當用戶點擊頁面內容時纔會顯示。 這工作得很好。 我現在需要在用戶點擊使其可見的內容之前將某些數據屬性分配給這些按鈕之一。

可以指向褪色的元素並添加所需的數據屬性？

我所有的嘗試都不成功。

任何幫助，這將不勝感激。

編輯：

<div class="ui-draggable"> 
    <div id="119a7" class="container template-block drg-elem"> 
     <div class="row clearfix drg ui-sortable" contenteditable="true"> 
      <div class="column col-md-6"> 
       <h1>Lorem Ipsum</h1> 
       <p>Lorem Ipsum is simply dummy text. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
       <div class="row-arrange ui-sortable-handle"> 
        <div class="btn-xs arrange-handle"> 
         <i class="fa fa-arrows"></i> 
        </div> 
       </div> 
      </div> 
      <div class="column col-md-6"> 
       <img src="assets/builder/images/e09-1.jpg"> 
       <div class="row-arrange ui-sortable-handle"> 
        <div class="btn-xs arrange-handle"> 
         <i class="fa fa-arrows"></i> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="tool-box"> 
     <div class="row-settings"> 
      <i class="fa fa-wrench"></i> 
     </div> 
    </div> 
</div> 

沒有什麼特別在這裏。這是一個放在html page上的模板。

tool-box是被淡化的元素。

我試圖引用這個元素，但它找不到。 問題是我怎樣才能引用一個不可見的元素。

Answer 1

您是否在元素淡出之後刪除元素？如果不是，您可以，否則不能。

$.extend($.fn, { 
 
    fill: function() { 
 
     return this.data('foo', 'bar'); 
 
    }, 
 
    inspect: function() { 
 
     console.log(this.data('foo')); 
 
     return this; 
 
    } 
 
}); 
 
$('button').click(function() { 
 
    $('main div')[this.id](); 
 
});

main div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #333; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="fadeOut">Fade Out</button> 
 
<button id="remove">Remove</button> 
 
<button id="fill">Fill Data</button> 
 
<button id="inspect">Inspect</button> 
 
<main><div></div></main>