Question

对于Javascript来说，我几乎是个新手，所以请耐心等待。

我有一个按钮，它会打开一个div，然后显示一个城市列表，然后我实现了一个文本更改为“查看区域覆盖 - ”也可以正常工作。但是，当我试图关闭div并将文本返回到“查看区域覆盖+”原文时，我遇到了麻烦

这是我的代码：

$(document).ready(
    function() {
        $("#divArea").click(function(e) {
            e.preventDefault();
            $("#areasCovered").fadeToggle(1000);
            document.getElementById("h3Class").innerHTML = "View Areas Covered -";
        }); 
    });

    function() {
        $("#divArea").click(function(e) {
            e.preventDefault();
            $("#areasCovered").fadeToggle(1000);

            if (document.getElementById("h3Class").value = "View Areas Covered -" == true) {
                document.getElementById("h3Class").innerHTML = "View Areas Covered +";
            }; else {

            }
        }); 
    });

这是HTML：

<div class="well well-sm">                  
    <div id="divArea" class="img-responsive" >
        <a href="#"><h3>View Areas Covered +</h3></a>
        <div id ="areasCovered" class="img-responsive">
            <p  class="paragraph1"> //list of cities </p>
        </div>
    </div>
</div>

任何帮助都会很棒！

Answer 1

您的文档准备好了，请使用以下语法：

$(document).ready(function() {
      $("#divArea").click(function(e) {
        e.preventDefault();
        $("#areasCovered").fadeToggle(1000);

        if (document.getElementById("h3Class").value = "View Areas Covered -" == true) {
            document.getElementById("h3Class").innerHTML = "View Areas Covered +";
        } else {
            document.getElementById("h3Class").innerHTML = "View Areas Covered -";
        }
    });      
});

这应该有效。

Editted：添加了其他声明

编辑2：稍微清理了一下代码

Answer 2

您需要稍微改变逻辑，不需要两个点击处理程序。在这里，我添加了一个简单的css类来判断这些区域是否被切换。此外，如果您使用jQuery，则无需使用getElementById

$(function () {
    $("#divArea").click(function (e) {
        e.preventDefault();
        $(this).find("h3").text($(this).is(".js-clicked") ? "View Areas Covered +" : "View Areas Covered -");
        $(this).toggleClass("js-clicked");
        $(this).find("#areasCovered").fadeToggle(1000);
    });
});

Fiddle

Answer 3

你的if语句似乎有点搞砸了。尝试直接比较值而不是检查“true”：

if (document.getElementById("h3Class").value == "View Areas Covered -") {
  // do something
}

您也不需要两个不同的点击处理程序。

Answer 4

看看你的if条件，你不必检查== true，你必须将字符串与“==”而不是“=”进行比较。

if (document.getElementById("h3Class").value = "View Areas Covered -" == true) {
    document.getElementById("h3Class").innerHTML = "View Areas Covered +";
};

试试这个：

if (document.getElementById("h3Class").value == "View Areas Covered -") {
    document.getElementById("h3Class").innerHTML = "View Areas Covered +";
};

OR

if (document.getElementById("h3Class").innerHTML == "View Areas Covered -") {
    document.getElementById("h3Class").innerHTML = "View Areas Covered +";
};

希望这有帮助

Answer 5

您的JavaScript代码有多种错误：

首先，当我执行它时，我得到＆＃34;函数语句需要一个名字＆＃34; （等等，什么？！）
您;声明末尾有一个if，使您的else声明完全失效
你为什么要用几乎完全相同的内容声明两个函数？
你宣布一个没有名字的功能，但是你从不使用它
你的if语句不正确，你有=和==个标志：你想测试什么才真正测试？

我将展示如何从您的代码中逐个解决问题：

这是您的初始代码：

$(document).ready(
    function() {
        $("#divArea").click(function(e) {
            e.preventDefault();
            $("#areasCovered").fadeToggle(1000);
            document.getElementById("h3Class").innerHTML = "View Areas Covered -";
        }); 
    });

    function() {
        $("#divArea").click(function(e) {
            e.preventDefault();
            $("#areasCovered").fadeToggle(1000);

            if (document.getElementById("h3Class").value = "View Areas Covered -" == true) {
                document.getElementById("h3Class").innerHTML = "View Areas Covered +";
            }; else {

            }
        }); 
    });

首先，如果对您的代码有疑问，那么将您的＆＃34; document.ready＆＃34;外部化更好一点。命名函数中的代码：

// I've just taken the function in the $(document).ready call
// and externalize it with a name
function onReady() {
    $("#divArea").click(function(e) {
        e.preventDefault();
        $("#areasCovered").fadeToggle(1000);
        document.getElementById("h3Class").innerHTML = "View Areas Covered -";
    });
}

$(document).ready(onReady);

    // here you can see there is still a function with no name
    // why is that happening ? that's not correct
    function() {
        $("#divArea").click(function(e) {
            e.preventDefault();
            $("#areasCovered").fadeToggle(1000);

            if (document.getElementById("h3Class").value = "View Areas Covered -" == true) {
                document.getElementById("h3Class").innerHTML = "View Areas Covered +";
            }; else {

            }
        }); 
    });

现在，您可以清楚地看到这个未使用的未使用功能。如果它未被使用，则其他地方存在问题：它的逻辑应采用onReady方法：

function onReady() {
    $("#divArea").click(function(e) {
        e.preventDefault();
        $("#areasCovered").fadeToggle(1000);

        if (document.getElementById("h3Class").value = "View Areas Covered -" == true) {
            document.getElementById("h3Class").innerHTML = "View Areas Covered +";
        }; else {

        }
    });
 }

$(document).ready(onReady);

接下来，我们尝试简化您的代码：

function onReady() {
    $("#divArea").click(function(e) {
        e.preventDefault();
        $("#areasCovered").fadeToggle(1000);

        // use local variable when you can
        var elementToReplace = document.getElementById("h3Class");

        // look closely at this if statement,
        // you should see 2 incorrect things
        if (elementToReplace.value = "View Areas Covered -" == true) {
            elementToReplace.innerHTML = "View Areas Covered +";
        }; else {

        }
    });
 }

$(document).ready(onReady);

您的if具有以下格式：if (a.b = "c" == true)。这是一个有效的JavaScript语句，但绝对不是您想要做的。我想你想要的是：if (a.b === "c")。因此，让我们重写这个if语句，并将大括号括在新行中：

if (elementToReplace.value === "View Areas Covered -")
{
    elementToReplace.innerHTML = "View Areas Covered +";
};
else
{
}

您是否在;的{{1}}后看到待处理的}？这是不正确的。

最后，您可以做些什么：

if

Answer 6

如果我理解正确，你需要的是显示/隐藏区域列表，并根据区域列表的可见性更改标题，即如果区域隐藏显示+，如果它是viisble，则显示减号。

你可以用这个小代码来完成：

<div class="well well-sm">                  
    <div id="divArea" class="img-responsive" >
        <a href="#" id="toggle"><h3>View Areas Covered -</h3></a>
        <div id ="areasCovered" class="img-responsive">
            <p  class="paragraph1"> //list of cities </p>
        </div>
    </div>
</div>

这个javascript：

$('#toggle').click(function() {
    $('#areasCovered').stop(true,true);
    var visible = $('#areasCovered').is(':visible')
    $('#areasCovered').fadeToggle(1000);
    var $title= $('#divArea').find('h3');
    $title.text(visible
                ? 'View Areas Covered +'
                : 'View Areas Covered -');
});

Look the JSFiddle here

Answer 7

$(document).ready(function(){
        $("#divArea").click(function(e){
            e.preventDefault();
            $("#areasCovered").fadeToggle(1000);
            var button = $("#h3Class");
            if(button.html() == "View Areas Covered +")
                button.html("View Areas Covered -");
            else
                button.html("View Areas Covered +");
        }); 
    });

所以我做了一些修复和优化。

DOM请求是昂贵的，并不是很大，但是将它们保持在最低限度的良好做法。所以我将元素存储为变量，因此我们有1个请求而不是2。
将DOM请求交给jQuery，因为你已经在使用它了。
现在只使用toggle if语句向按钮注册一个侦听器。

Javascript - 双击后将文本更改回原始文本

7 个答案: