Question

我见过关于检查一个元素是否有一个类和一个id的线程，但是我的设置方式是不可能的。

我有一个以砖石布局布局的项目列表，每个项目都有一个project类。每个项目都有一个唯一的ID，由项目标题命名。当用户右键单击某个项目时，默认的Google Chrome菜单会被包含两个选项的自定义菜单所取代 Open Project In A New Tab＆amp; View Project Details。

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

以下是我的两个想法：

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

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

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

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

以下是我为该页面设置的代码：

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元素与受尊重的元素绑定在一起链接标签。

Answer 1

第一个选项到目前为止是您问题的最佳解决方案，而且很容易实现。

首先，您需要向id元素添加.project属性，因为原始HTML中缺少此属性。然后，您可以在{1}}菜单中存储导致id事件的元素的contextmenu。

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

虽然您的代码有几点需要注意。首先，data('id')代码是自动关闭的，因此它是<img />，而不是<img />。其次，我不想贬低，但你对计时器的<img></img>逻辑是坦率的，可怕的。您应该重构它以尽快使用CSS媒体查询。我意识到你正在JS中进行计算以定位resize，但即使我确定可以通过更好设计的HTML和CSS来解决。

尽管如此，试试这个：

＆＃13;

footer

＆＃13;

$(".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);
});

＆＃13;

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;
}

＆＃13;

检查元素是否具有某些类和某些ID

1 个答案: