$(function() {
// onload時にSelect要素の値を取得して、 // `other-element`要素の表示状態を変更する var selectValue = $("#project_custom_field_values_2").val(); if (selectValue == "従事していない") { $('p').each(function () { var p = $(this); var labels = $(this).find('label'); var label = labels.first(); var innerText = label.text(); //console.log(innerText); switch (innerText) { case "test": p.hide(); var inputs = p.find('input'); inputs.hide(); break; case "test2": p.hide(); break; case "症状": p.hide(); break; default: console.log(""); } }); } else { $('p').each(function () { var p = $(this); var labels = $(this).find('label'); var label = labels.first(); var innerText = label.text(); //console.log(innerText); switch (innerText) { case "test": p.show(); break; case "test2": p.show(); break; case "症状": p.show(); break; default: console.log(""); } }); } $("#project_custom_field_values_2").on("change", function() { if ($(this).val() == "従事していない") { $('p').each(function () { var p = $(this); var labels = $(this).find('label'); var label = labels.first(); var innerText = label.text(); //console.log(innerText); switch (innerText) { case "test": p.hide(); var inputs = p.find('input'); inputs.hide(); break; case "test2": p.hide(); break; case "症状": p.hide(); break; default: console.log(""); } }); } else { $('p').each(function () { var p = $(this); var labels = $(this).find('label'); var label = labels.first(); var innerText = label.text(); //console.log(innerText); switch (innerText) { case "test": p.show(); break; case "test2": p.show(); break; case "症状": p.show(); break; default: console.log(""); } }); } }); }); 上記のコードに重複しているif とelse の間のコードをサブルーチンにできますか?書き直してください。
【Google Bardの回答】
はい、重複しているifとelseの間のコードをサブルーチンにすることができます。
書き直したコードは、次のようになります。
JavaScript
$(function() {
// onload時にSelect要素の値を取得して、
// `other-element`要素の表示状態を変更する
var selectValue = $("#project_custom_field_values_2").val();
if (selectValue == "従事していない") {
// サブルーチンを呼び出す
hideElements();
} else {
// サブルーチンを呼び出す
showElements();
}
// onChangeイベントをハンドリングする
$("#project_custom_field_values_2").on("change", function() {
if ($(this).val() == "従事していない") {
// サブルーチンを呼び出す
hideElements();
} else {
// サブルーチンを呼び出す
showElements();
}
});
});
// サブルーチン
function hideElements() {
// p要素をすべて取得する
var ps = $("p");
// p要素ごとに処理を行う
ps.each(function() {
// ラベル要素を取得する
var label = $(this).find("label").first();
// ラベルのテキストを取得する
var innerText = label.text();
// switch文で処理を行う
switch (innerText) {
case "test":
// p要素を非表示にする
$(this).hide();
break;
case "test2":
// p要素を非表示にする
$(this).hide();
break;
case "症状":
// p要素を非表示にする
$(this).hide();
break;
default:
// 何もしない
break;
}
});
}
function showElements() {
// p要素をすべて取得する
var ps = $("p");
// p要素ごとに処理を行う
ps.each(function() {
// ラベル要素を取得する
var label = $(this).find("label").first();
// ラベルのテキストを取得する
var innerText = label.text();
// switch文で処理を行う
switch (innerText) {
case "test":
// p要素を表示する
$(this).show();
break;
case "test2":
// p要素を表示する
$(this).show();
break;
case "症状":
// p要素を表示する
$(this).show();
break;
default:
// 何もしない
break;
}
});
}
この書き直したコードでは、重複しているifとelseの間のコードを、hideElements()とshowElements()という2つのサブルーチンに分離しました。
hideElements()サブルーチンは、p要素を非表示にする処理を行います。showElements()サブルーチンは、p要素を表示する処理を行います。
onLoadイベントとonChangeイベントのハンドリングも、サブルーチンを呼び出すように変更しました。
この書き直したコードにより、コードの可読性と保守性が向上します。また、コードの重複を排除することで、パフォーマンスの向上も期待できます。
コメント
コメントを投稿