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

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

javascript jquery html

Javascript-双击后将文本更改回原始文本,javascript,jquery,html,Javascript,Jquery,Html,说到Javascript，我几乎是个新手，所以请容忍我我有一个按钮，它将打开一个div，然后显示一个城市列表，然后我将文本更改为“查看覆盖的区域”，这也很好。但是，当我试图关闭div并将文本返回到原始文本“ViewAreasCovered+”时遇到了麻烦这是我的密码： $(document).ready( function() { $("#divArea").click(function(e) { e.preventDefault();

说到Javascript，我几乎是个新手，所以请容忍我

我有一个按钮，它将打开一个div，然后显示一个城市列表，然后我将文本更改为“查看覆盖的区域”，这也很好。但是，当我试图关闭div并将文本返回到原始文本“ViewAreasCovered+”时遇到了麻烦

这是我的密码：

$(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>


//城市列表

任何帮助都会很好

您的文档准备就绪错误，请使用以下语法：

$(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 -";
        }
    });      
});

这应该行得通

编辑：添加了else语句

编辑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);
    });
});

您的if语句似乎有点混乱。尝试直接比较值，而不是检查“true”：

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

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

试试这个：

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

或

希望这对您有所帮助

您的JavaScript代码在多个方面都是错误的：

首先，当我执行它时，我得到“函数语句需要一个名称”（等等，什么？！）
有一个
在您的
```
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 {

            }
        }); 
    });

首先，当您对代码有疑问时，最好将“document.ready”代码外部化到命名函数中：

// 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语句，但绝对不是您想要做的。我想你想要这样：

如果（a.b==“c”）

。因此，让我们重写这个

if

语句，并在新行中加上大括号：

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

您是否看到挂起的

的}
之后是code>？那是不对的
最后，以下是您本可以做的：
// when in doubt with your code, it's a bit better to
// externalize your "document.ready" code in a named function
function onReady() {
    $("#divArea").click(function(e) {
        e.preventDefault();
        $("#areasCovered").fadeToggle(1000);

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

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

$(document).ready(onReady);

如果我理解正确，您需要的是显示/隐藏区域列表，并根据区域列表的可见性更改标题，即如果区域隐藏，则显示+，如果区域可见，则显示负号
您可以使用以下小代码完成此操作：
<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>


所以我做了一些修正和优化

DOM请求很昂贵，不是很大，但将其保持在最低限度是很好的做法。所以我将元素存储为一个变量，所以我们有1个请求，而不是2个
将DOM请求交换到jQuery，因为您已经在使用它
现在，只向按钮注册一个侦听器，并使用toggleif语句
这很容易。但是我不明白你想做什么。您可以显示HTML并解释发生了什么，以及当它与HTML一起发生时会发生什么吗？您的if子句看起来很难看，您不必检查==true，请尝试document.getElementById（“h3Class”）。value==“查看覆盖的区域”-您的JavaScript是否有效？谢谢您的输入-但是，当我尝试这一点时，淡入淡出开关拒绝工作，我建议你应该让你的JS验证。我到处看到一些丢失的“；”。除此之外，我还没有真正接触过你的fadeToggle（）。如果不起作用，请尝试使用fadeIn（）和fadeOut（）？我需要更多关于你的淡入淡出的信息来了解它的作用。谢谢，这是有效的-但是当我点击它时，页面会移到顶部，这是它以前没有做过的，我试图避免这样做以改善用户体验。有没有解决方法？（操作在页面底部）我删除了默认设置，因为我在看到html之前不知道你有一个链接，添加这个链接，它就可以工作了。@Dog124是的，Esa的代码可以工作，但你至少明白为什么你的代码一开始就不工作了吗？既然您是从JavaScript开始的，我认为这对您来说是最重要的部分。如果你不这样做，那么你将不得不一次又一次地问问题，因为你不知道问题在哪里，你无法自己解决问题。请始终记住，SO不是复制/粘贴站点。谢谢。但是JSFiddle中的文本没有返回到a+，这正是我需要的，它现在正在工作。我最初用切换来编辑它，它工作得很好，但后来我把它改成了fadeToggle``和borke。现在它又开始工作了。我进一步更新了代码：现在+和-appear在必要时，如果你在切换完成之前点击链接，它就可以正常工作了。顺便说一句，我会做一个更快的fadeToggle
，1秒钟太慢了。这是否解决了您的问题？使用您的代码，在第二次单击时，文本不会返回到a+，这是正常的。。。当值为xxx-
时，您将其设置为xxx+
，但当值不是时，您将其设置为其他值（我在代码示例中设置了它）。你至少读过我的密码吗？！
if (elementToReplace.value === "View Areas Covered -")
{
    elementToReplace.innerHTML = "View Areas Covered +";
};
else
{
}

// when in doubt with your code, it's a bit better to
// externalize your "document.ready" code in a named function
function onReady() {
    $("#divArea").click(function(e) {
        e.preventDefault();
        $("#areasCovered").fadeToggle(1000);

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

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

$(document).ready(onReady);

<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>

$('#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 -');
});

$(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 +");
        }); 
    });