Question

我在那里，我正在创作一个包含许多不同艺术家的艺术家页面，其中包含每个艺术家的作品集图像和一些细节。我想在页面顶部设置按钮，点击页面上的艺术家。

我为每个艺术家类型指定了一个特定的类，当单击按钮按特定类型对艺术家进行排序时，它会隐藏所有未选择的类型的艺术家。示例：点击＆＃39;音乐＆＃39;它隐藏了所有摄影＆＃39;电影＆＃39;和＆＃39;图形＆＃39;艺术家，只留下音乐艺术家。

我遇到的问题是一些艺术家都是＆＃39;音乐＆＃39;和摄影＆＃39;艺术家，当我选择＆＃39; Music＆＃39;艺术家，它隐藏了艺术家，因为他也属于摄影＆＃39;艺术家系列，自音乐艺术家入选以来一直隐藏。

每个艺术家元素的HTML代码

        <div class="col-md-4 col-lg-4 musicartist">
        <div id="artist1">
          <div class="arthov">
            <img class="img-circle img-responsive" src="../img/artists/music/Lexxicon.png">
            <div id="recentwork"><p><a href="#">View Artist</a><p></div>
          </div>
            <p><strong><h3>Lexxicon</h3></strong>R&B | Toronto, ON<br>tentoesdownco@gmail.com</strong></p>
        </div>
      </div>

用于隐藏特定类的所有HTML元素的JS脚本代码。

    <script>
function filterMusicArtists() {
  var appBanners = document.getElementsByClassName('musicartist'), i;

  for (var i = 0; i < appBanners.length; i ++) {
      appBanners[i].style.display = 'none';
  }
}
</script>

页面顶部的按钮代码，用于过滤艺术家。这会调用所有JS方法来隐藏未选中的其他艺术家类型。

<div class="col-md-2">
          <div class="music">
            <div class="musicgenre" type="button" onclick="showMusicArtists();filterPhotographyArtists();filterFilmArtists();filterOtherArtists();filterGraphicArtists();filterFashionArtists();">Music</div>
          </div>
        </div>

我有HTML和CSS的经验，虽然我是JS的新手。我知道这个过程很可能非常低效且不理想，所以任何帮助都会受到赞赏。只是想弄清楚如何展示属于不止一种艺术的艺术家！

谢谢！

Answer 1

首先.hide具有代表未点击类别的类的元素，然后.show执行的那些元素。最终结果将是所有拥有您点击课程的艺术家将被展示。

e.g：

$('.film, .music').hide();
$('.photography').show();

...将展示同时拥有film和photography类或同时拥有music和photography类的艺术家，但不会显示仅拥有film和music类的艺术家{1}}或仅document.getElementsByClassName。

非jQuery解决方案几乎一样容易。只需使用style.display标识您的元素，然后设置using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Configuration; namespace adoDemo { public partial class WebForm3 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnSubmit_Click(object sender, EventArgs e) { string SC = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; using (SqlConnection con = new SqlConnection(SC)) { SqlCommand cmd = new SqlCommand("dbo.spAddEmployee", con); cmd.CommandType = System.Data.CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@Name", txtEmployeeName.Text); cmd.Parameters.AddWithValue("@Gender", ddlGender.SelectedValue); cmd.Parameters.AddWithValue("@Salary", txtSalary.Text); SqlParameter outputParameter = new SqlParameter(); outputParameter.ParameterName = "@EmployeeID"; outputParameter.SqlDbType = System.Data.SqlDbType.Int; outputParameter.Direction = System.Data.ParameterDirection.Output; cmd.Parameters.Add(outputParameter); con.Open(); cmd.ExecuteNonQuery(); string EmpID = outputParameter.Value.ToString(); lblMessage.text = "Employee ID = " + EmpID; } } } }。

Answer 2

这是因为您想要隐藏除所选艺术家之外的所有艺术家，但您的代码会隐藏您选择的艺术家类型。

 <script>
function filterMusicArtists(type) {

var appBanners = document.getElementsByClassName('artist');

for (var i = 0; i < appBanners.length; i ++) {
  var currentArt = appBanners[i];
    if ( currentArt.classList.contains(type) )
    {
       if (!currentArt.hidden){
          currentArt.hidden=true;
       }
   }
  }
}
</script>

按类名对HTML元素进行排序，但具有多个类的元素

2 个答案: