Question

我正在尝试创建一个显示/隐藏HTML元素的复选框，但我试图使其尽可能高效（回收一个函数并使其能够进化，而不是手动和静态编写独特的函数）

我已经成功了一次，但是在一个稍微不同的场景中（包括：“JavaScript Extract - Working Recycled Function”）但无法让它在这个新场景中工作（包括：“JavaScript Extract - Not Working Recycled Function我已经清除了我能从中得到的东西，但这次我很困难。经过几个小时的解决其他问题，我的大脑有点停下来。我有多个元素等着也用它，但是现在我只是想让它首先使用Google元素。

HTML提取

<div id="googleContainer">
    <input type="text" id="googleSearchBox" title="Google Search" class="searchBox" />
    <input type="button" id="googleSearchButton" onClick="execSearchWithClick(this.id)" />
</div>
<input type="checkbox" id="googleCheck" checked="checked" onClick="setPref(this.id)"/>

JavaScript提取 - 工作循环功能

var googleHome = "http://www.google.com/"; //Set home page
var googleSearchURL = googleHome + "search?q="; //Prime search URL
function execSearchWithClick(id){
    alert(id) //Check ID
    var searchBox = document.getElementById(id.replace("Button", "Box")); //Convert "googleSearchButton" to "googleSearchBox" to match target element
    var searchQuery = searchBox.value; //Extract value from converted string-to-variable

    if (searchQuery == ""){
        if (id == "googleSearchButton") {
            window.open(googleHome);
        } //I would use "if(condition && condition)" rather than nested IFs here, but I plan to use ELSE IF very soon
    } else {
        if (id == "googleSearchButton") {
            window.open(googleSearchURL + searchQuery);
        } 
    }
}

JavaScript提取 - 不工作的回收功能

var googleDisplay = true;
function setPref(id){
    alert(id) //Check ID
    var checkboxDisplayString = document.getElementById(id.replace("Check", "Display")); //Convert "googleCheck" to "googleDisplay" to match boolean variable
    alert(checkboxDisplayString) //Null value reply
    var checkboxDisplayVar = checkboxDisplayString //Convert (what I suspect to be) String to variable name
    alert(checkboxDisplayVar) //Null value reply

    if (id == "googleCheck" && checkboxDisplayVar == true){
        checkboxDisplayVar = false;
        applyPref();
    } else {
        checkboxDisplayVar = true;
        applyPref();
    }
}

function applyPref(){
    if (googleDisplay == true){
        document.getElementById("googleContainer").style.display = "block";
    } else {
        document.getElementById("googleContainer").style.display = "none";
    }
}

编辑：我为那些现在提问的人添加了更多细节。对不起，如果一切都变得更加混乱。

Answer 1

这将是我的尝试：

    function setPref(id){
        var checkbox = document.getElementById(id);
        applyPref(checkbox.checked);      
    }

    function applyPref(show){
        if (show){
            document.getElementById("googleContainer").style.display = "block";
        } else {
            document.getElementById("googleContainer").style.display = "none";
        }
    }

我可能会遗漏一些东西，但我认为像上面这样的东西应该有用

Answer 2

我会做这样的事情..而不是转换变量名，只需将变量传递给函数onCLick。

<div id="one" style="width:100%;height:100px;background-color:#000;"></div>
<form>
<input id="one-check" type="checkbox" name="one" onclick="showOrHide('one');">
</form>
<div id="two" style="width:100%;height:100px;background-color:#000;"></div>
<form>
<input id="two-check" type="checkbox" name="two" onclick="showOrHide('two');">
</form>

JAVASCRIPT

function showOrHide(id){

alert(id);

var checkBox = document.getElementById(id+'-check');

if (checkBox.checked == 1){

document.getElementById(id).style.display = "none";

} else {

document.getElementById(id).style.display = "block";

}

}

创建可循环使用的函数并将字符串转换为变量名称

2 个答案: