单击btn toggleClass并使用jQuery更改文本

时间：2017-03-28 08:34:48

标签： jquery

我正在处理一些内容块，当我点击按钮时需要切换。它现在可以正常工作，但是当它的焦点或活动以及内容被切换时，文本不会在我的按钮上发生变化。请参阅下面的代码（也表示未捕获的语法错误：意外的标识符）。

＆＃13;
＆＃13; 
$(".mobile-tab").click(function() {
  $(this).parent().children(".content").toggleClass("open", function() {
    if ($(this).parent().children(".content").hasClass("open")) {
      $(this).parent().children(".mobile-tab").children(".symbol").text("Sluiten -");
    } else {
      $(this).removeClass("open").parent().children(".mobile-tab").children(".symbol").text("Lees meer +");
    }

  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entity entity-field-collection-item field-collection-item-field-tabs clearfix" about="/field-collection/field-tabs/15" typeof="">
 

<div class="title">
		<div class="field field-name-field-titel-event field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Programma</div></div></div>		</div>
  <div class="content">
      
	<div class="field field-name-field-inhoud field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even">
<p>some randowm content</p>
</div></div></div>	  </div>

<div class=" mobile-tab">
	
	<div class="symbol">Lees meer +</div>
 </div>
</div>
＆＃13;
＆＃13;
＆＃13;

希望如果得到正确的答案，

关心Martijn

3 个答案:

答案 0 :(得分：1)

我删除了一些代码，因为根本不需要它。

请看下面的示例，现在它会更改symbol

的文字 

$(".mobile-tab").click(function() {
  $(this).parent().find(".content").toggleClass("open");
  if ($(this).prev(".content").hasClass("open") == true) {
    $(this).find(".symbol").text("Sluiten -");
  } else {
    $(this).find(".symbol").text("Lees meer +");
  }
});
.content {
  display: none;
}

.content.open {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entity entity-field-collection-item field-collection-item-field-tabs clearfix" about="/field-collection/field-tabs/15" typeof="">


  <div class="title">
    <div class="field field-name-field-titel-event field-type-text field-label-hidden">
      <div class="field-items">
        <div class="field-item even">Programma</div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="field field-name-field-inhoud field-type-text-with-summary field-label-hidden">
      <div class="field-items">
        <div class="field-item even">
          <p>some randowm content</p>
        </div>
      </div>
    </div>
  </div>

  <div class=" mobile-tab">

    <div class="symbol">Lees meer +</div>
  </div>
</div>
<br><br>
<div class="entity entity-field-collection-item field-collection-item-field-tabs clearfix" about="/field-collection/field-tabs/15" typeof="">


  <div class="title">
    <div class="field field-name-field-titel-event field-type-text field-label-hidden">
      <div class="field-items">
        <div class="field-item even">Programma</div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="field field-name-field-inhoud field-type-text-with-summary field-label-hidden">
      <div class="field-items">
        <div class="field-item even">
          <p>some randowm content</p>
        </div>
      </div>
    </div>
  </div>

  <div class=" mobile-tab">

    <div class="symbol">Lees meer +</div>
  </div>
</div>
<br><br>
<div class="entity entity-field-collection-item field-collection-item-field-tabs clearfix" about="/field-collection/field-tabs/15" typeof="">


  <div class="title">
    <div class="field field-name-field-titel-event field-type-text field-label-hidden">
      <div class="field-items">
        <div class="field-item even">Programma</div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="field field-name-field-inhoud field-type-text-with-summary field-label-hidden">
      <div class="field-items">
        <div class="field-item even">
          <p>some randowm content</p>
        </div>
      </div>
    </div>
  </div>

  <div class=" mobile-tab">

    <div class="symbol">Lees meer +</div>
  </div>
</div>

答案 1 :(得分：1)

您的代码的第一个问题是，当您没有toggleClass()方法时，您正在为if方法提供回调函数。该调用是同步的，因此您可以在其后放置siblings()语句。

其次，你的DOM遍历不太正确，并且会受到删除上述函数的影响。要解决此问题，您可以使用.content获取find()元素，只使用.symbol子$(".mobile-tab").click(function() { var $content = $(this).siblings(".content").toggleClass("open"); var $symbol = $(this).find('.symbol'); $symbol.text($content.hasClass("open") ? 'Sluiten -' : 'Lees meer +'); });，如下所示：

.content { display: none; }
.content.open { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class>
  <div class="field field-name-field-titel-event field-type-text field-label-hidden">
    <div class="field-items">
      <div class="field-item even">Programma</div>
    </div>
  </div>
  <div class="content">
    <div class="field field-name-field-inhoud field-type-text-with-summary field-label-hidden">
      <div class="field-items">
        <div class="field-item even">Content</div>
      </div>
    </div>
  </div>
  <div class="mobile-tab">
    <div class="symbol">Lees meer +</div>
  </div>
</div>
strings(1)

答案 2 :(得分：1)

＆＃13;
＆＃13; 
var btnText = ["Lees meer +", "Sluiten -"];

$(".mobile-tab").click(function() {

  var $me = $(this); // Hello, it's me
  var $content = $(this).closest(".parentHellYeah").find(".content");

  $content.toggleClass("open");
  
  var isOpen = $content.hasClass("open");
  $me.text( btnText[ +isOpen ] );

  
});
＆＃13; 
.parentHellYeah .content{
  display:none;
}
.parentHellYeah .content.open{
  display:block;
}

.mobile-tab{
  background: gold;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="parentHellYeah">

  <div class="field field-name-field-titel-event field-type-text field-label-hidden">
    <div class="field-items">
      <div class="field-item even">Programma</div>
    </div>
  </div>

  <div class="content">
    <div class="field field-name-field-inhoud field-type-text-with-summary field-label-hidden">
      <div class="field-items">
        <div class="field-item even">CONTENT?</div>
      </div>
    </div>
  </div>

  <div class="mobile-tab">
    <div class="symbol">Lees meer +</div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题