Question

我正在尝试创建一个简单的代码：一个html文档，它将获取插入测试框和区域框中的值，并创建一个带有人名和注释的注释部分。该名称旁边会有一个[+]图像（是的，由于纸张需要，它必须是一个图像），点击它时会变成[ - ]图像并显示隐藏的注释。我写了以下文字：

<head>
    <meta charset="utf-8" />
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <input type="text" id="name"/>Enter your name here <br />
    <textarea id="message"></textarea>
    <button onclick="message()">Submit message</button>
    <span id="anchor"></span>
<script>
        function message() { //Built by Nimrod Yanai as an example.
            var name = $("#name").val();
            var message = $("#message").val();
            var name2 = '<div><p><img class=\"pic\" src=\"Plus.jpg\">' + name + '</p><br /><p class=\"hide message\">' + message + '</p></div>';
            $(name2).insertBefore("#anchor");
        };

        $(document).ready(function() {
            $('body').on('click', ".pic", function () {
                if ($(this).attr("src") == "Plus.jpg") {
                    $(this).attr("src", "Minus.jpg");
                    $(".message").removeClass("hide");
                }
                else {
                    $(this).attr("src", "Plus.jpg");
                    $(".message").addClass("hide");
                }
            });
        });

</script>
</body>

代码据说非常简单......但它不起作用。使用F12我确认创建了相关的s，包含所有正确的类和ID。我在测试页面中插入了一个名称和注释，确实在它之前显示了一个带有[+] img的书面名称。当我删除CSS时，我可以看到具有textarea值的第二个div确实也是正确创建的。所以我假设第一个功能完美无缺。

问题从第二个函数开始，因为按下img元素什么都不做。

这是我到目前为止所尝试的内容： 1.在图片之前创建一个元素并将id =“pic”移动到该图片。没工作。 2.在元素中放置一个[+]文本而不是图片，看看是否有效，但事实并非如此。

有关如何解决此问题的任何想法？它本来应该很简单......

P.S。当我按下图片时，F12在页面上没有显示任何错误，它什么也没做。

Answer 1

更新

$('body').on('click', '.pic', function(){
  if ($(this).attr("src") == "Plus.jpg") {
    $(this).attr("src", "Minus.jpg");
    $(this).closest('div').find(".message").removeClass("hide");
  } else {
    $(this).attr("src", "Plus.jpg");
    $(this).closest('div').find(".message").addClass("hide");
  }
});

使用.on()，如下所示，而不是直接点击图片#pic，因为它是动态添加的。

此外，正如评论中提到的用户@ j08691，您在if条件中使用了赋值运算符。

$('body').on('click', "#pic", function() {
  if ($("#pic").attr("src") == "Plus.jpg") {
    $("#pic").attr("src", "Minus.jpg");
    $(".message").removeClass("hide");
  } else {
    $("#pic").attr("src", "Plus.jpg");
    $(".message").addClass("hide");
  }
});

$(document).ready(function() {
  $('body').on('click', "#pic", function() {
    if ($("#pic").attr("src") == "Plus.jpg") {
      $("#pic").attr("src", "Minus.jpg");
      $(".message").removeClass("hide");
    } else {
      $("#pic").attr("src", "Plus.jpg");
      $(".message").addClass("hide");
    }
  });
});

function message() {
  var name = $("#name").val();
  var message = $("#message").val();
  var name2 = '<div><p><img id=\"pic\" src=\"Plus.jpg\">' + name + '</p><br /><div class=\"hide message\"><p>' + message + '</p></div></div>';
  $(name2).insertBefore("#anchor");
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />Enter your name here
<br />
<textarea id="message"></textarea>
<button onclick="message()">Submit message</button>
<span id="anchor"></span>

jQuery .click（）方法不适用于.attr（“src”）=“”

1 个答案:

更新