Question

我现在正在学习jQuery，并想知道是否有可能让我的代码工作的方式？当我单击绿色按钮时，它不会显示第二个表格行。我可以做些什么来避免将来出现这种错误？我愿意接受任何帮助！拜托，谢谢你。

jquery：

$(document).ready(function () {
    $("button").click(function () {
        $(".row2").show();
    });
});

HTML：

<table>
    <tr class="row1">
        <td>
            <p>This is where the text in the boxes will go!</p>
        </td>
        <td>
            <p>This is where the text in the boxes will go!</p>
        </td>
        <td>
            <p>This is where the text in the boxes will go!</p>
        </td>
        <tr class="row2">
            <td>
                <p>This is where the text in the boxes will go!</p>
            </td>
            <td>
                <p>This is where the text in the boxes will go!</p>
            </td>
            <td>
                <p>This is where the text in the boxes will go!</p>
            </td>
        </tr>
</table>
<a class="greenbuttontext" href="#"><button class="showmorebutton">Show9 more concepts</button></a>

css：

/*styles for green showmore button*/
 .showmorebutton {
    height: 33px;
    border: solid #628b06 1px;
    border-radius: 5px;
    width: 200px;
    margin-left: 600px;
    margin-bottom: 25px;
    text-align: center;
    background-color: #99cd00;
    color: white;
    vertical-align: center;
    line-height: 33px;
}

.greenbuttontext {
    text-decoration: none;
}

/*row2 disappear*/
.row2 {
    display:none;
}

Answer 1

不要将<button />包裹在<a />标记中吗？ click事件可能会在锚点而不是按钮上触发。

Answer 2

你的HTML无效。标签内的按钮

<a class="greenbuttontext" href="#"><button class="showmorebutton">Show
            9 more concepts</button></a>

更改为

<a class="greenbuttontext" href="#"></a>
<button class="showmorebutton">Show
            9 more concepts</button>

注意：标记是内联块元素。

jQuery：按钮切换功能无法按预期运行

2 个答案: