时间戳

首页 > 解决方案 > 如果数据属性相同，则显示 div

jquery - 如果数据属性相同，则显示 div

问题描述

我需要你对 jQuery 的帮助。如果我单击 Curl 按钮，如何使用属性制作下面的带有数据语言 curl 的 div，请与 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);
     }
});

而且我被困在那里，如果我单击按钮，我不知道该怎么做，我想显示好的描述并隐藏其他描述。谢谢。

标签： jquery

解决方案

这很简单。默认隐藏所有的divs，监听标签的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>

推荐阅读