javascript - 检查元素是否具有特定的类和特定的 ID

Question

我见过一些关于检查元素是否具有类和特定 ID 的线程，但我的设置方式是不可能得到这些答案的。

我有一个以砖石布局布局的项目列表，每个项目都有一个 project 类。每个项目都有一个唯一的 ID，该 ID 以项目的标题命名。当用户右键单击项目时，默认的 Google Chrome 菜单将替换为具有两个选项的自定义菜单，
在新选项卡中打开项目 & 查看项目详细信息。

我当前的问题是获取用户右键单击的特定项目。

这是我的两个想法:

1. 简单版:检查用户右键单击的项目的ID。
2. 复杂版本:获取div的顶部和左侧偏移量，并将它们组合起来以获得自定义菜单的左上角。
   然后检查该点是否位于项目的左上点之间
   以及 top + projectImg.height() 和 left + projectImg.width() 来获取项目的右下角。

我倾向于简单版本，但这是我的问题:

if($(".project").is("#project1name")) {
    // True
}

这样做的问题是，由于所有项目都有一个 project 类，如果至少有一个项目具有给定的 id if，则所有项目都为 true > 语句正在检查。

这是我为该页面设置的代码:

var resizeTimer;
$(window).on("resize", function() {

  if ($(window).width() > 1600) {
    $(".content").css("width", "1521px");
  }
  if ($(window).width() <= 1600 && $(window).width() > 1400) {
    (".content").css("width", "1268px");
  }
  if ($(window).width() <= 1400 && $(window).width() > 1200) {
    $(".content").css("width", "1015px");
  }
  if ($(window).width() <= 1200 && $(window).width() > 1000) {
    $(".content").css("width", "762px");
  }
  if ($(window).width() <= 1000 && $(window).width() > 800) {
    $(".content").css("width", "509px");
  }
  if ($(window).width() <= 800) {
    $(".content").css("width", "256px");
  }

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    var footer = ($(".content").offset().top * 2) + $(".content").height();
    $(".footer").css("top", footer);
  }, 250);

}).resize();

// Trigger action when the contexmenu is about to be shown
$(".project").bind("contextmenu", function(event) {

  // Avoid the real one
  event.preventDefault();

  // Show contextmenu
  $(".custom-menu").finish().toggle(100).

  // In the right position (the mouse)
  css({
    top: event.pageY + "px",
    left: event.pageX + "px"
  });
});


// If the document is clicked somewhere
$(document).bind("mousedown", function(e) {

  // If the clicked element is not the menu
  if (!$(e.target).parents(".custom-menu").length > 0) {

    // Hide it
    $(".custom-menu").hide(100);
  }
});


// If the menu element is clicked
$(".custom-menu li").click(function() {

  // This is the triggered action name
  switch ($(this).attr("data-action")) {

    // A case for each action. Your actions here
    case "newTab":
      alert("first");

      break;

    case "second":
      alert("second");

      break;
  }

  // Hide it AFTER the action was triggered
  $(".custom-menu").hide(100);
});

body {
  background: #212121;
}

.content {
  background: #424242;
  padding: 20px;
  max-width: 1521px;
  margin: 150px auto;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
}

.project {
  display: inline-block;
}

.project:hover {
  transform: scale(1.04);
  transform-origin: center;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
}

.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  overflow: hidden;
  border: 1px solid #CCC;
  white-space: nowrap;
  font-family: sans-serif;
  background: #FFF;
  color: #333;
  border-radius: 5px;
  padding: 0;
}

.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
  list-style-type: none;
  transition: all .3s ease;
}

.custom-menu li:hover {
  background-color: #DEF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='custom-menu'>
  <li data-action="newTab">Open In New Tab</li>
  <li data-action="viewDetails">View Details</li>
</ul>
<div class="content">
  <a href="http://www.sethjfreeman.com/Homepage/Projects/WordCounter/baseplate.php"><img src="http://www.sethjfreeman.com/Homepage/Images/wordCounter.png" height="150px" width="250px" class="project"></img>
  </a>
  <a href="http://www.sethjfreeman.com/Homepage/Projects/CalmForm/baseplate.php"><img src="http://www.sethjfreeman.com/Homepage/Images/calmForm.png" height="150px" width="250px" class="project"></img>
  </a>
  <a href="http://www.sethjfreeman.com/Homepage/Projects/Timer/baseplate.php"><img src="http://www.sethjfreeman.com/Homepage/Images/timer.png" height="150px" width="250px" class="project"></img>
  </a>
  <a href="http://www.sethjfreeman.com/Homepage/Projects/SimpleTHREE_Cube/baseplate.php"><img src="http://www.sethjfreeman.com/Homepage/Images/simpleCube.png" height="150px" width="250px" class="project"></img>
  </a>
  <a href="http://www.sethjfreeman.com/Homepage/Projects/SimpleTHREE_DrawingBox/baseplate.php"><img src="http://www.sethjfreeman.com/Homepage/Images/boxLine.png" height="150px" width="250px" class="project"></img>
  </a>
</div>

简单版本的工作方式是，一旦您右键单击 $(".project").bind("contextmenu", function (event) 中的项目，它就会检查哪个您单击的项目并将上下文菜单中的 li 元素与受尊重的链接标记绑定(bind)。

Answer 1

第一个选项是迄今为止解决您的问题的最佳解决方案，并且实现起来非常简单。

首先您需要添加id属性为.project元素，因为原始 HTML 中缺少该元素。然后你可以存储id导致contextmenu的元素事件在data('id')菜单。

从菜单中选择一个选项后，您可以检索 data('id')从菜单中并使用它来了解需要哪个项目。

不过，关于您的代码，有几件事需要注意。首先<img />标签是自动关闭的，所以它是 <img /> ，不是<img></img> 。其次，我不想听起来贬低你，但是你的resize坦率地说，计时器的逻辑是可怕的。您应该重构它以尽快使用 CSS 媒体查询。我知道你正在 JS 中进行计算来定位 footer ，但即便如此，我确信可以通过设计更好的 HTML 和 CSS 来解决这个问题。

话虽如此，试试这个:

$(".project").bind("contextmenu", function(event) {
  event.preventDefault();

  $(".custom-menu").finish().toggle(100).css({
    top: event.pageY + "px",
    left: event.pageX + "px"
  }).data('id', this.id); // set the chosen id here...
});

$(document).bind("mousedown", function(e) {
  if (!$(e.target).parents(".custom-menu").length > 0) {
    $(".custom-menu").hide(100);
  }
});

$(".custom-menu li").click(function() {
  var id = $(this).closest('.custom-menu').data('id'); // get the chosen id here...
  console.log(id);

  switch ($(this).attr("data-action")) {
    case "newTab":
      console.log("open new tab...");
      break;

    case "viewDetails":
      console.log("get details...");
      break;
  }

  $(".custom-menu").hide(100);
});

body {
  background: #212121;
}

.content {
  background: #424242;
  padding: 20px;
  max-width: 1521px;
  margin: 150px auto;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
}

.project {
  display: inline-block;
}

.project:hover {
  transform: scale(1.04);
  transform-origin: center;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 1);
}

.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  overflow: hidden;
  border: 1px solid #CCC;
  white-space: nowrap;
  font-family: sans-serif;
  background: #FFF;
  color: #333;
  border-radius: 5px;
  padding: 0;
}

.custom-menu li {
  padding: 8px 12px;
  cursor: pointer;
  list-style-type: none;
  transition: all .3s ease;
}

.custom-menu li:hover {
  background-color: #DEF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='custom-menu'>
  <li data-action="newTab">Open In New Tab</li>
  <li data-action="viewDetails">View Details</li>
</ul>
<div class="content">
  <a href="http://www.sethjfreeman.com/Homepage/Projects/WordCounter/baseplate.php">
    <img src="http://www.sethjfreeman.com/Homepage/Images/wordCounter.png" height="150px" width="250px" class="project" id="project-A" />
  </a>
  <a href="http://www.sethjfreeman.com/Homepage/Projects/CalmForm/baseplate.php">
    <img src="http://www.sethjfreeman.com/Homepage/Images/calmForm.png" height="150px" width="250px" class="project" id="project-B" />
  </a>
  <a href="http://www.sethjfreeman.com/Homepage/Projects/Timer/baseplate.php">
    <img src="http://www.sethjfreeman.com/Homepage/Images/timer.png" height="150px" width="250px" class="project" id="project-C" />
  </a>
  <a href="http://www.sethjfreeman.com/Homepage/Projects/SimpleTHREE_Cube/baseplate.php">
    <img src="http://www.sethjfreeman.com/Homepage/Images/simpleCube.png" height="150px" width="250px" class="project" id="project-D" />
  </a>
  <a href="http://www.sethjfreeman.com/Homepage/Projects/SimpleTHREE_DrawingBox/baseplate.php">
    <img src="http://www.sethjfreeman.com/Homepage/Images/boxLine.png" height="150px" width="250px" class="project" id="project-E" />
  </a>
</div>