Question

我在我的一个网页上使用Bootstrap标签，用于作业应用程序门户。每个<li>的选项卡内容包括：a）职称，b）职位描述，以及c）“立即申请”按钮。我需要在点击时隐藏其中一个位置的“立即申请”按钮，但是其余部分会显示。

我尝试使用事件处理程序以两种不同的方式完成此操作，但一直没有成功：

计算该标签的地址栏中填充的哈希值：

$('.careers-positions li').on('click', 'a', function() {
  if (window.location.hash === '#it-consultant') {
    ('.tab-content .apply-button').addClass('hidden');
  } else {
    ('.tab-content .apply-button').removeClass('hidden');
  }
});

“立即应用”按钮还具有data-jobid属性，该属性与click事件相关联，该属性根据在列表中单击的位置更改值。但出于某种原因，从这种方式接近它也是不成功的：

$('.careers-positions li').on('click', 'a', function() {
  if ($('.tab-content .apply-button').attr('data-jobid') === 'fd39f67d-8e99-476b-8421-080d8dca42e0') {
    $('.tab-content .apply-button').addClass('hidden');
  }
 });

如何配置此功能，以便根据是否点击此特定职位动态显示/隐藏“立即申请”按钮？

Answer 1

这对你有用吗？

$('.careers-positions li a[data-jobid="fd39f67d-8e99-476b-8421-080d8dca42e0"]').on('click', function() {
  $(this).find('.apply-button').addClass('hidden');
});

Answer 2

如果我理解，你有多个标签在每个标签中有多个作业???每个“工作”都使用<ul>结构？

您可以使用$(this)获取父级，而不是选择所有“标签”，就像您使用时一样

$('.careers-positions').on('click', 'a', function() {
    $(this).closest('ul').find('.apply-button').hide();  // can you not just use this??? 
    // or instead of hide() use the .addClass('hidden'), either or
 });

如何隐藏特定Bootstrap选项卡的HTML？

2 个答案: