Question

我目前正在尝试使用基本的JavaScript应用程序。

我最终希望有一本书可以显示封面上的基本信息，只需点击一下链接，该书就会显示其他信息。

我有两个div; #frontBook将显示书的正面，其中包括有关当前书籍的基本信息（即标题，作者，页面，阅读或不阅读）和#insideBook，它们将显示有关书籍的其他信息（即，他们最喜欢的页面，出版商的名字等。）

我希望#frontBook div显示，并且首先隐藏#insideBook。然后，一旦点击＃additional-info链接，我希望隐藏#frontBook并显示#insideBook。

我在下面添加了我的代码，但它不起作用。我真的不确定自己哪里出错了。请帮助！

提前致谢。

P.S。我知道JQuery会被推荐用于这样的东西，但我只是想确保我能先用JavaScript来掌握这个概念。

HTML：

<div id="frontBook">
        <div id="book-outline">



            <div id="book-content">

                <ul id="basic-book-content">
                    <li><span class="basic-book-details" id="new-title">Title: </span></li>
                    <li><span class="basic-book-details" id="new-author">Author: </span></li>
                    <li><span class="basic-book-details" id="new-pages">Pages: </span></li>
                    <li><span class="basic-book-details" id="new-read">Read?:</span></li>
                    <li style="line-height: 80px; margin-right:-2px;">
                        <a href="#" id="additional-info" onclick="toggle_book();">Additional Info
                        <i style="color:white;" class="far fa-caret-square-right" ></i>
                    </a>

                    </li>
                </ul>


            </div>
            <!-- closes #book-content-->
        </div>
    </div>
    <div id="insideBook" style="display:none">
        <div id="inside-book-outline">



            <div id="inside-book-content">

                <ul id="additional-book-content">
                    <li><span class="additional-book-details" id="new-editor"> Editor's Name: </span></li>
                    <li><span class="additional-book-details" id="new-publisher">Publisher's Name: </span></li>
                    <li><span class="additional-book-details" id="new-pub-comp">Publsiher Company's Name: </span></li>
                    <li><span class="additional-book-details" id="new-page-at">Page Up to:</span></li>
                    <li><span class="additional-book-details" id="new-line-at">Line Up to:</span></li>
                    <li><span class="additional-book-details" id="new-genre">Genre:</span></li>
                    <li><span class="additional-book-details" id="new-in-series">In Series?:</span></li>
                    <li style="line-height: 80px; margin-right:-2px;">
                        <a href="#" id="less-info" onclick="toggle_book();">
                        <i style="color:white;" class="far fa-caret-square-right"></i>Less Info
                    </a>

                    </li>

                </ul>


            </div>
            <!-- closes #inside-book-content-->
        </div>
    </div>

JavaScript的：

function toggle_book() {
    var front = document.getElementById('frontBook');
    var inside = document.getElementById('insideBook');
    if (inside.style.display === 'block') {
        inside.style.display = 'none';
        front.style.display = 'block';
    } else {
        inside.style.display = 'block';
        front.style.display = 'none';
    }
}

Answer 1

好吧，你似乎错过了两件事。

1）你的if语句逻辑向后应该是：

function toggle_book() {
  var front = document.getElementById('frontBook');
  var inside = document.getElementById('insideBook');
  if (inside.style.display === 'block') {
    inside.style.display = 'none';
    front.style.display = 'block';
  } else {
    inside.style.display = 'block';
    front.style.display = 'none';
  }

2）内部工作簿中的onclick标记没有<a>属性可以将其切换回来

麻烦在点击链接时在两个div之间切换 - Javascript

1 个答案: