Javascript 隐藏/显示元素无法正常工作
Posted
技术标签:
【中文标题】Javascript 隐藏/显示元素无法正常工作【英文标题】:Javascript hide/show elements does not work properly 【发布时间】:2022-01-06 22:20:37 【问题描述】:我已将此复选框添加到我的表单中:
<div class="row">
<div class="form-group col">
<input type="checkbox" name="prd_presell" id="product_presell"
onclick="presellTXT()" value="TRUE" @if(!empty($product)) @if($product->prd_presell == 'TRUE') checked @endif @endif>
<label for="presell_product">Presell Product</label>
</div>
</div>
所以有一个名为 presellTXT()
的 onClick 函数如下所示:
function presellTXT()
var presell_checkbox = document.getElementById("product_presell"); // get checkbox
var presell_text = document.getElementById("show_presell_text"); // text div
var presell_text_input = document.getElementById("presell_product_text"); // text input
if (presell_checkbox.checked == true)
presell_text.style.display = "block";
else
presell_text_input.value = "";
presell_checkbox.value = "";
presell_text.style.display = "none";
所以当复选框被选中时,它基本上显示了id为show_presell_text
的元素:
<div class="row" id="show_presell_text">
<div class="col-lg-12">
<div class="form-group">
<label>Product Presell Text:</label>
<input name="prd_presell_text" id="presell_product_text" class="form-control" value=" old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') ">
</div>
</div>
</div>
因此,当页面加载时,它不应显示产品预售文本,除非选中该复选框。
现在,如果您查看jsfillde 示例,您可以看到页面加载后,文本输入出现,但复选框根本没有选中!
那么如何在页面加载且未选中复选框的情况下隐藏文本输入?
注意:我不想为此使用 CSS,因为我需要正确确定是否在页面加载时检查了 prd_presell
(因为 @if($product->prd_presell == 'TRUE')
从数据库中检索数据)那么它必须显示 Product Presell Text 文本输入。
更新:
我尝试添加这个:
#show-presell-text.hidden
display: none !important;
并将其添加到 div:
<div class="row" id="show_presell_text" class="@if(!empty($product)) @if($product->prd_presell != 'TRUE') hidden @endif @endif">
但不起作用并隐藏元素。
【问题讨论】:
document.getElementById("product_presell").value ,勾选不勾选总是true 【参考方案1】:要在加载时隐藏/显示元素,然后可以通过添加这样的 if 语句轻松完成
@if (!empty($product))
<div class="row" id="show_presell_text">
<div class="col-lg-12">
<div class="form-group">
<label>Product Presell Text:</label>
<input name="prd_presell_text" id="presell_product_text" class="form-control" value=" old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') ">
</div>
</div>
</div>
@endif
如果为空,这将在页面加载时完全省略您想要的元素,您可以通过 JS 代码添加它。但是,如果您只想使用 CSS 类隐藏它,您可以这样做:
<div class="row" id="show_presell_text" class="@if (empty($product)) hidden @endif">
<div class="col-lg-12">
<div class="form-group">
<label>Product Presell Text:</label>
<input name="prd_presell_text" id="presell_product_text" class="form-control" value=" old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') ">
</div>
</div>
</div>
如果产品为空,则该类将不存在,如果该类不存在,您可以使用 CSS 将元素设置为 display: none
。让我知道我是否可以进一步澄清或者我有什么问题。
编辑:如果产品为空,则第二个代码块的更好替代方法是添加一个隐藏类,如下所示,然后使用它通过 CSS 隐藏它。然后,您可以根据需要通过 JS 简单地添加或删除此类。
#show-presell-text.hidden
display: none;
【讨论】:
在你的第二个代码块中使用class
而不是不渲染 id
我用display:none
尝试了hidden
类,但没有成功
你在 CSS、Laravel、JS 方面的水平如何,所以我知道如何提供最好的帮助。当使用类来加强样式时,在#show-presell-text
和.hidden
之间不应该有空格,就像在我的示例中一样,否则它将假定隐藏的类属于嵌套元素。
请看我的更新
根据您的解释和 JSFiddle,不应该只在产品为空的情况下添加 hidden
类吗?对于当前的 if 条件,它是相反的加号旁注,您可以将 if 语句的两个条件链接起来,因为它们不是互斥的成为 @if (!empty($product) && $product->prd_presell != 'TRUE')
【参考方案2】:
你可以试试这样的。
<div class="row" id="show_presell_text" style="display: none">
默认设置为无显示,并根据函数中的条件设置为块/无。
【讨论】:
请看一下我在问题中的Note。如果我在这种情况下使用 CSS,即使复选框被正确选中,文本输入也不会出现!以上是关于Javascript 隐藏/显示元素无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章