javascript - 获取点击项目的文本

Question

当我右键单击文本时，它会弹出一个菜单，菜单有 option Get text, Get id. 我想获取所选链接的文本、id、链接值。

下面是我的代码：

// when we're about to show the context menu, show our own instead
$(document).on("contextmenu", function(event) {
  // Avoid the real one if this is the link
  if ($(event.target).hasClass("sim-row-edit")) {
    event.preventDefault();
    // Show contextmenu
    $(".custom-menu").show(100).
    css({
      top: event.pageY + "px",
      left: event.pageX + "px"
    });
  }
});

// hide our context menu when the document is clicked
$(document).on("mouseup", function() {
  $(".custom-menu").hide(100);
});

$(".custom-menu li").click(function() {
  alert("hii");
  // This is the triggered action name
  switch ($(this).attr("data-action")) {
    // A case for each action. Should personalize to your actions
    case "first":
      console.log(this);
      break;
    case "second":
      console.log("second");
      break;
    case "third":
      console.log("third");
      break;
  }
});

.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  overflow: hidden;
  width: 120px;
  white-space: nowrap;
  font-family: sans-serif;
  -webkit-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
}

.custom-menu li {
  padding: 5px 10px;
}

.custom-menu li:hover {
  background-color: #4679BD;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="sim-row-edit" id="sim-id" data-type="link">Portfolio</a>
<ul class='custom-menu'>
  <li data-action="first">Get text,id,url of selected</li>
  <li data-action="second">Second thing</li>
  <li data-action="third">Third thing</li>
</ul>

当您单击“获取所选文本、id、url”时，我需要控制台记录文本、href 值和它的 id。

标签： javascriptjqueryhtml

Answer 1

稍微改变你的选择器，像这样：

// when we're about to show the context menu, show our own instead
$(document).on("contextmenu", function(event) {
  // Avoid the real one if this is the link
  if ($(event.target).hasClass("sim-row-edit")) {
    event.preventDefault();
    // Show contextmenu
    $(".custom-menu").show(100).
    css({
      top: event.pageY + "px",
      left: event.pageX + "px"
    });
  }
});

// hide our context menu when the document is clicked
$(document).on("mouseup", function() {
  $(".custom-menu").hide(100);
});

$(".custom-menu li").click(function() {
  alert("hii");
  // This is the triggered action name
  switch ($(this).attr("data-action")) {
    // A case for each action. Should personalize to your actions
    case "first":
      console.log($(this).parent().parent().children('a').text());
      console.log($(this).parent().parent().children('a').attr('id'));
      console.log($(this).parent().parent().children('a').attr('href'));
      break;
    case "second":
      console.log("second");
      break;
    case "third":
      console.log("third");
      break;
  }
});

.custom-menu {
  display: none;
  z-index: 1000;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  overflow: hidden;
  width: 120px;
  white-space: nowrap;
  font-family: sans-serif;
  -webkit-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5);
}

.custom-menu li {
  padding: 5px 10px;
}

.custom-menu li:hover {
  background-color: #4679BD;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="sim-row-edit" id="sim-id" data-type="link">Portfolio</a>
<ul class='custom-menu'>
  <li data-action="first">Get text,id,url of selected</li>
  <li data-action="second">Second thing</li>
  <li data-action="third">Third thing</li>
</ul>