Question

我需要你对jQuery的帮助。我如何使用属性，如果我点击Curl按钮，下面的div出现数据语言curl，对于Java，Node和PHP是否相同？

这是我的HTML

<div class"btn-container">
  <a language-button="curl">Curl</a>
  <a language-button="java">Java</a>
  <a language-button="node">Node</a>
  <a language-button="php">PHP</a>
</div>

<div class="row description" data-language="curl">
</div>
<div class="row description" data-language="java">
</div>
<div class="row description" data-language="node">
</div>
<div class="row description" data-language="php">
</div>

这是我的Jquery：

$(document).ready(function(){
     for ($o = 1; $o <= derniere_table_infos; $o++) {
       (function ($o) {
           $('.btn-container>a:nth-child(' + $o + ')').click(function () {
                $('.description').hide();
                if($(this).attr('language-button') == $('.description').attr('data-language')){
                   // Don't know what to put there and if "if condition" is good
                }           
       })($o);
     }
});

而且我被困在那里，如果我点击按钮我想要出现好的描述并隐藏其他按钮，我就不知道怎么做。感谢。

Answer 1

这非常简单。默认情况下隐藏所有div，并收听click代码的a事件。

当点击发生时，获取相应language-button属性的值，然后仅显示具有正确分配的div：

$(document).ready(function() {
  $('.row.description').hide();

  $('a[language-button]').click(function() {
    var lang = $(this).attr('language-button');
    $('.row.description').hide();
    $('.row.description[data-language=' + lang + ']').show();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class "btn-container">
  <a language-button="curl">Curl</a>
  <a language-button="java">Java</a>
  <a language-button="node">Node</a>
  <a language-button="php">PHP</a>
</div>

<div class="row description" data-language="curl">curl</div>
<div class="row description" data-language="java">java</div>
<div class="row description" data-language="node">node</div>
<div class="row description" data-language="php">php</div>

如果数据attr相同，则显示div

1 个答案: