Question

我有一个基本的节目并隐藏了一些内容的切换，你可以在这个JSFiddle中看到。它工作得很好，做我需要做的事。

然而，我也在做的是从另一个页面锚定到这些div并触发显示的答案div。我使用下面的代码让这个工作得很好，但是当你来自另一个页面时，我很难让文本更改为关闭答案（也会切换），而不会影响上面提到的手动切换。

我尝试了一些事情，但它没有正常工作，所以我把代码剥离了，以便更加清晰。我遇到的一个主要问题是只更改特定div的文本，而不是影响页面上所有具有相同类的div。

以下代码：

<div id="anchorid1" class="question__wrapper">
  <div class="question__item">
    <p>
    What sort of question am i one?
    </p>
    <div class="view__answer">
      <div class="view__answer-btn">View Answer</div>
    </div>
  </div>
  <div class="answer__wrapper">
    <div class="answer__item"> I'm the answer that is hidden</div>
  </div>
</div>

<div id="anchorid2" class="question__wrapper">
  <div class="question__item">
    <p>
    What sort of question am i two?
    </p>
    <div class="view__answer">
      <div class="view__answer-btn">View Answer</div>
    </div>
  </div>
  <div class="answer__wrapper">
    <div class="answer__item"> I'm the answer that is hidden</div>
  </div>
</div>



$(document).ready(function () {
    $('.view__answer-btn').on('click', function(e){
    $(e.target).parents().next('.answer__wrapper').slideToggle(500, function () {});
    $(e.target).toggleClass('open');

    if ($(e.target).hasClass( 'open' )) {
       $(this).html('Close Answer');
    } else {
       $(this).html('View Answer');
    }
});
});



$(function() {
    var anc = window.location.href.split('#')[1];
    $('#' + anc + '.question__wrapper').find('.answer__wrapper').show();   
});

Answer 1

也许这会奏效！原谅愚蠢的缩进。

$(function() {
    var anc = window.location.href.split('#')[1];
    $('#' + anc + '.question__wrapper').find('.answer__wrapper')
                                       .show()
                                       .prev().find('.view__answer-btn')
                                       .addClass('open')
                                       .html('Close Answer');
});

从另一页面锚定到div时切换文本

1 个答案: