Question

我的Jscript / Jquery不能正常工作。我可以提醒，但我不能让我的div切换。有人可以向我解释为什么好吗？我的代码如下。如果重要的话，我正在使用JSP。

我的Javascript

$(window).ready(function(){
    $(".moreButtonClass").click(function(e){
        var id = this.id;
        var cleanid = id.replace(/[^\d]/g, "");
        var dog = "post" + cleanid;
        alert(dog);
        $(dog).toggle();
    });
});

我的Html

<div id="content">
    <h1>Site Update Log:</h1>
<% for(int i = 0; i<2; i++){ %>
    <div class="blogPost" id="postGroup<%= i %>">
        <div>The ID is :<%out.print(indexModel.miniBlogConnector.GetID(i));%></div>
        <div>The DATE is :<%out.print(indexModel.miniBlogConnector.GetDate(i));%></div>
        <div>The AUTHOR is :<%out.print(indexModel.miniBlogConnector.GetAuthor(i));%></div>
        <div>The MINIPOST is :<%out.print(indexModel.miniBlogConnector.GetShortPost(i));%></div>
        <div class="MainPost" id="post<%=i%>">The POST is :<%out.print(indexModel.miniBlogConnector.GetPost(i));%></div>
        <button type="button" class="moreButtonClass" id="moreButton<%=i%>">more</button>
    </div>
<% } %>
</div> <!-- end #content -->

我的CSS

.MainPost {
    display:none;
}

任何人都可以向我解释为什么我可以提醒狗并获得正确的变量名称。但是当我试图切换它时;它不起作用。什么都没发生。没有错误;没有变化。它绝对没有任何作用。我甚至尝试使用console.log而无法让它做出反应。该按钮有效，因为警报有效;但切换功能无效。

任何人都可以告诉我如何解决这个问题吗？

Answer 1

这里dog只是一个变量，而不是DOM节点。

你需要这样做：

$("#"+dog).toggle(); //assuming it is an id. if class, use . instead of  #

Answer 2

如果dog中的内容是ID，请使用：

$("#" + dog).toggle();

或者，如果是一个类，请使用：

$("." + dog).toggle();

因为在你的情况下，它将是一个ID，你需要使用第一个。

Answer 3

你在这里错过了选择器#。然后它会将其视为一个不是DOM元素的变量

var dog = "#post" + cleanid;
        $(dog).toggle();

或

$("#"+dog).toggle();

jquery切换不起作用

3 个答案: