[英]Improve my Jquery code to hide and show elements
I am new to Jquery and learning.我是 Jquery 的新手,正在学习。 I wrote some script, but I know its not efficient.
我写了一些脚本,但我知道它效率不高。 Trying to follow DRY principles.
尝试遵循 DRY 原则。 Can someone please make this look nicer...it works fine, but i dont like it.
有人可以让这个看起来更好吗...它工作正常,但我不喜欢它。
It works, just not efficient code.它有效,只是不是高效的代码。
<script>
$(document).ready(function () {
var val = $('#id_ocftype').val();
if (val <= 3) {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
else {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
};
$('#id_ocftype').change(function () {
var val = $(this).val();
if (val <= 3) {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
else {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
};
});
});
</script>
Since the conditional statement inside the jquery code is same.由于 jquery 代码中的条件语句是相同的。 You can wrap it into single javascript function and call it whereever it is needed.
您可以将其包装成单个 javascript function 并在需要的地方调用它。
<script>
$(document).ready(function () {
const showAndHide = (val) => {
if (val <= 3) {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
else {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
};
}
var val = $('#id_ocftype').val();
showAndHide(val);
$('#id_ocftype').change(function () {
var val = $(this).val();
showAndHide(val);
});
});
</script>
The elements to show or hide are always the same, so you can put them all into a single variable and reference that variable.要显示或隐藏的元素始终相同,因此您可以将它们全部放入一个变量中并引用该变量。
$(document).ready(function () {
const elms = $('#div_id_date, #div_id_amount, #div_id_signedby');
const onChange = () => {
const val = $('#id_ocftype').val();
if (val <= 3) {
elms.hide();
} else {
elms.show();
};
};
onChange();
$('#id_ocftype').change(onChange);
});
You can look into.toggleClass .您可以查看.toggleClass 。
It allows you to specify when to add/ remove class.它允许您指定何时添加/删除 class。
function handleVisibility() {
var val = $('#id_ocftype').val();
const hide = val <= 3
$('#div_id_date').toggleClass('hide', hide)
$('#div_id_amount').toggleClass('hide', hide)
$('#div_id_signedby').toggleClass('hide', hide)
}
$(document).ready(function() {
$('#id_ocftype').change(handleVivibility);
handleVisibility()
});
you can create a common function你可以创建一个通用的 function
<script>
$(document).ready(function () {
var val = $('#id_ocftype').val();
const hideEl = () => {
$('#div_id_date').hide();
$('#div_id_amount').hide();
$('#div_id_signedby').hide();
}
const showEl = () => {
$('#div_id_date').show();
$('#div_id_amount').show();
$('#div_id_signedby').show();
}
if (val <= 3) {
hideEl();
}
else {
showEl();
};
$('#id_ocftype').change(function () {
var val = $(this).val();
if (val <= 3) {
hideEl();
}
else {
showEl();
};
});
});
</script>
also you can use toggle你也可以使用切换
$("button").click(() => { $("#test").toggle(); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="test">test</div> <button>Hide/Show</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.