Question

我想在单击＃filter-button元素时向我的元素ID #block_filters添加一个类.filter_open，所以这是我的HTML：

public function index(Request $request)
{   
     $id= $request->user()->id;
     $user = User::find($id);
     //$id = Auth::user()->id;
     //$request = DB::table('users')->where('id', $id)->first();
     //dd($id); exit;

     return view('frontend.balance.index',compact('user'));
}

这是我的.js

<a id="filter-button" >Show filters</a>
<div class="block_content" id="block_filters" >


</div>

但是它不起作用，我找不到原因。

感谢您的帮助

编辑：

我也在测试这种方式，但是没有运气

function open_filters() {
  var f_toggle = $('#filter-button');
  var f_content = $('#block_filters');
  f_toggle.on('click', function(e) {
    f_content.addClass('filter_open');
    e.stopPropagation();
    e.preventDefault();
  });

}

Answer 1

您可以尝试这种方式。阅读下面的链接以更好地了解

Event binding on dynamically created elements?

var result = await api.Get<List<Achievement>>(path);
foreach (Achievement achievement in result) 
{ 
    Console.WriteLine(achievement.Name);
}

$(document).ready(function() { open_filters(); });

function open_filters() {
  var f_toggle = $(document).find('#filter-button');
  var f_content = $(document).find('#block_filters');
  
  f_toggle.on('click', function(e) {
    f_content.addClass('filter_open');
    e.stopPropagation();
    e.preventDefault();
  });

}

.filter_open{
 background-color:red;
}

Answer 2

只需在脚本中添加preventDefault即可避免浏览器刷新，请参见下面的代码

$('#filter-button').click(function (e) {
    e.preventDefault()
    $('#block_filters').addClass('filter_open');

});

确保已在head标签中导入了jquery脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

基本上，您已经添加了一个类，但是由于页面重新加载后，它将再次将其类设置为默认值。

addClass不会将类添加到元素

2 个答案: