Question

我尝试在列表中显示一个项目，该项目的类别与另一个列表中的ID完全相同。当我点击另一个列表然后它会在另一个列表中找到匹配类然后显示它时，这将被激活。

以下是我使用的代码基本上第一个列表位于TableCell *cell = (NBEServicesCell*)[tableView dequeueReusableCellWithIdentifier:"@yourIdentifier" forIndexPath:indexPath]; //Assigning each row a number. [cell.yourLabel setFont:[UIFont fontWithName:@"Avenir-Heavy" size:14.0]]; cell.yourLabel.numberOfLines = 0; cell.yourLabel.lineBreakMode = NSLineBreakByWordWrapping; [cell.yourLabel sizeToFit]; cell.yourlabel.frame.size.width = newWidth; cell.yourlabel.frame.size.height = newHeight; 列表2是我要在列表1中显示的菜单。

第一个列表一次只能有一个可见项目。

小提琴是here

HTML

display:none;

SCRIPT：

<div id="gallery-container">
            <li class="1723"><p>
      123
      </p></li>
            <li class="1725"><p>
      456
      </p></li>
    </div>
<ul id="gallery-list">
    <li id="1723">
        <strong>qwertyuiop</strong>
    </li>
    <li id="1725">
        <strong>asdfghjkl</strong>
    </li>
</ul>

CSS：

    $("#gallery-list li").click(function() {    
            alert(event.target.id);
        $("#gallery-container li .wc-gallery").css("display", "none");
    });

    window.onload = function () {
         $("#gallery-container li p").css("display", "none");
    }

Answer 1

~~在一个id文档中使用相同的HTML 糟糕。永远不要这样做。没人喜欢，jQuery不喜欢这样。我不喜欢它。~~尝试使用类或data属性。

但是......从头开始......你并不是真的想要这样做。但仍然......最好使用data属性：）

无论如何，要使用data属性来完成此操作，您可以执行以下操作：

HTML 的

<div id="gallery-container">
  <li data-id="1723">
    <p>
      123
    </p>
  </li>
  <li data-id="1725">
    <p>
      456
    </p>
  </li>
</div>
<ul id="gallery-list">
  <li data-id="1723">
    <strong>qwertyuiop</strong>
  </li>
  <li data-id="1725">
    <strong>asdfghjkl</strong>
  </li>
</ul>

JS

$("#gallery-list li").click(function() {
  var id = $(this).data('id');
  $("#gallery-container").find('li').each(function() {
     $(this).find('p').toggle($(this).data('id') === id);
  });
});

jsfiddle

Answer 2

$('#gallery-list li').click(function() {    
    var targeeet = $(this).attr('id');
    $('.' + targeeet).children().css('display', 'block');
});

试试这个。

Answer 3

如果您想要获取您点击的列表的ID：

    $("#gallery-list li").on("click", function() {
            alert($(this).attr("id"))
        $("#gallery-container li .wc-gallery").css("display", "none");
    });

Answer 4

您只需要：

$('#gallery-list li').click(function() {
      var target = $(this).attr('id');
      $("#gallery-container li").hide();
      $("#gallery-container li."+target).css('display', 'block');
    });

检查以下示例：

$('#gallery-list li').click(function() {
  var target = $(this).attr('id');
  $("#gallery-container li").hide();
  $("#gallery-container li."+target).css('display', 'block');
});

#gallery-container li{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="gallery-container">
  <li class="1723">
    <p>
      123
    </p>
  </li>
  <li class="1725">
    <p>
      456
    </p>
  </li>
</div>
<ul id="gallery-list">
  <li id="1723">
    <strong>qwertyuiop</strong>
  </li>
  <li id="1725">
    <strong>asdfghjkl</strong>
  </li>
</ul>

Answer 5

你想尝试手风琴吗？

$("#gallery-container li").hide();

$("#gallery-list li").click(function() {    
    $("#gallery-container li").hide();
    $("#gallery-container li."+this.id).show();
});

jsFiddle

显示具有事件目标ID的块

5 个答案: