jQuery隐藏函数出现问题

Issue with the jQuery Hide function

本文关键字：问题 函数 隐藏 jQuery      更新时间：2023-09-26

在HTML部分中，如果名为readOnly的布尔值为true，我希望隐藏一些类。

<div class="row">
        <div class="col-lg-12">                
            <div id="point-of-detection" style="display:none;">
                <h4>Point of Detection</h4>
                <div>
                    <ul class="list-inline">
                        <li><div class="btn btn-info" style="width:135px">Process</div></li>
                        <li>
                            <span class="btn btn-xs btn-info" onclick="addProcess($(this).parent().prev());">+</span>
                            <span class="btn btn-xs btn-danger" onclick="removeProcess($(this).parent().prev());">-</span>
                        </li>
                    </ul>
                    <ul class="list-inline">
                        <li><span class="btn btn-danger" style="width:135px">Work Elements</span></li>
                        <li>    
                            <span class="btn btn-xs btn-info" onclick="addWorkElement($(this).parent().prev());">+</span>
                            <span class="btn btn-xs btn-danger" onclick="removeWorkElement($(this).parent().prev());">-</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

在我的JS中，我一直在尝试这个代码。

$(document).ready(function () {
console.log("ready!");
$('#drag-1').draggable();
var readOnly = true;
    //$("#readOnly").val();
var testId = $("#Id").val();
//hide all extra small buttons when true? "btn btn-xs btn-default" onclick="addBox($(&quot;#drag-1&quot;));">add</span>
console.log(readOnly + testId);
if (readOnly == true) {
    $('.btn btn-xs btn-default').hide();
    $('.btn btn-xs btn-info').hide();
}
});

所以当readOnly为真时，我想隐藏所有这些元素

$('.btn btn-xs btn-default').hide();
    $('.btn btn-xs btn-info').hide();

是否存在某种问题，因为它是嵌套的还是？

您的选择器不正确。它们应该是：

$('.btn.btn-xs.btn-default').hide();
$('.btn.btn-xs.btn-info').hide();

每当您在选择器中放入一个空间时，您就开始讨论子代元素——在您的情况下，您的目标是任何具有.btn类的元素中不存在的<btn-xs>元素中包含的不存在的<btn-default>元素。

在你的情况下，如果你只想瞄准超小的按钮，你应该只使用一个类：

$('.btn-xs').hide();

这将在.btn-default和.btn-info按钮等上工作。

相关文章：