javascript - 显示按钮 B 时仅显示按钮 A

Question

我正在尝试使用 jQuery 在显示另一个按钮时显示一个按钮。但我不是 jQuery 专家。所以我想知道是否有人可以帮助我解决这个问题？

我有 2 个按钮:

• 按钮ent-step
• 按钮删除步骤

我想要做的是仅当按钮del-step出现在屏幕上时才显示按钮ent-step。通常，此按钮 del-step 会使用以下 JavaScript 隐藏:

function showDellocation($this) {
    var dataLocation = $this.attr("data-location");
        $(".del-step[data-location='" + dataLocation + "']").show();
        $(".add-step[data-location='" + dataLocation + "']").addClass( "blur" );
    }
function hideDellocation($this) {
    var dataLocation = $this.attr("data-location");
        $this.hide();
        $(".add-step[data-location='" + dataLocation + "']").removeClass("blur");
} 

按钮 ent-step 位于 Ajax 调用的另一个 PHP 文件中:

<table class="item-buttons">
    <tr>
        <td style="width:150px;">&nbsp;</td>
        <td style="width:150px;">
            <a href="example.com/step" value="Ent">
                <button class="ent-step">Entertainment&nbsp;
                    <i class="fa fa-angle-double-right" aria-hidden="true">/i>
                </button>
            </a>
       </td>
    </tr>
</table>

我可以使用 blur 类来激活此选项吗？例如:

jQuery(document).ready(function($) {   
    if ($(this).hasClass('blur')) {
        $('.ent-step').addClass('clickable');
    }

然后使用 CSS 设置按钮样式？ 或者这不是正确的方法？

Answer 1

您可以根据.add-step的class显示隐藏按钮

if ($('.add-step').hasClass('blur')) {
    $('.ent-step').show();
}

当您隐藏.add-step时，也会隐藏.ent-step按钮

function hideDellocation($this) {
   var dataLocation = $this.attr("data-location");
   $this.hide();
   $(".add-step[data-location='" + dataLocation + "']").removeClass("blur");
   $('.ent-step').hide();
}