javascript - 通过单击更改 div 数据

Question

我希望当点击 stackoverflow 时将 data-float-toggle 更改为悬停而不是点击。

我们可以通过下面的代码来实现吗

jQuery('.top-bottom').on('click', function(e) {
  'use strict';
  e.preventDefault();
  jQuery('.top-bottom').addClass('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-bottom" data-float-toggle="click">
  <a href="#">stackoverflow</a>
</div>

Answer 1

这个解决方案怎么样？希望对您有帮助!

$(document).ready(function () {
 $('.top-bottom').on('click', function(e) {
'use strict';
	e.preventDefault();
     $('.top-bottom').addClass('hide');
     $(this).attr('data-float-toggle', "hover");

});
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top-bottom" data-float-toggle="click">
		<a href="#">stackoverflow</a>
</div>

这是第二个问题的解决方案:

$(document).ready(function () { 
   $(".top-bottom").click(function(){
       $("#float-button").attr('data-float-toggle', "hover");
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="float-button" data-float-toggle="click"> 
    <div class="top-bottom" > 
        <a href="#">stackoverflow</a> 
    </div>
 </div>