logo标签列表

当点击一个锚点时触发另一个锚点的点击事件

javascriptjquerycsshtml
4
当我点击链接时，希望链接也被点击。然而，我的代码没有任何反应，请参见fiddle。
HTML：
<section class="space_between">
  <h3 class="center_rounded_ol">Man-to-man suggestions</h3>
    <ol class="rounded-list center_rounded_ol">
      <li>
        <a href="javascript:" id="foo" onClick="burn()">Name Surname</a>
      </li>

    </ol>
</section>

<nav class="nav-fillpath">
  <a class="next" onClick="load()">
    <span class="icon-wrap"></span>
    <h3><strong>Alexis</strong> Tsipras</h3>
  </a>      
</nav>

JavaScript：

function load() {
  $("#foo").tigger('click');
}
function burn() {
  $(this).css("color", "red");
}
3
你真的应该在JS中使用事件处理程序，而不是在HTML中。 - isherwood
这是如何实现的：http://jsfiddle.net/isherwood/r544j29j/ - isherwood
@isherwood，感谢您的指导。我可以问一下原因吗？或者这太过分了吗？以防万一，这是您更新的fiddle，更好地回答了我的问题：jsfiddle.net/gsamaras/r544j29j/3 // 我现在知道您是一名飞行员，所以您说的话应该是真实的！！！;) ;) - gsamaras
1
你能够将内容和其展示分开得越好，对于可维护性、可扩展性等方面就越有利。可以搜索“关注点分离”来了解更多相关理念。 - isherwood
2个回答
5
我个人更喜欢这样写：JS Fiddle。
$('.next').on('click', function() {
    $("#foo").trigger('click');
});
$('#foo').on('click', function() {
   $(this).css("color", "red");
});


$('.next').on('click', function() {
  $("#foo").trigger('click');
});
$('#foo').on('click', function() {
  $(this).css("color", "red");
});
nav a {
  position: absolute;
  top: 50%;
  display: block;
  outline: none;
  text-align: left;
  z-index: 1000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
nav a.prev {
  left: 0;
}
nav a.next {
  right: 0;
}
nav a svg {
  display: block;
  margin: 0 auto;
  padding: 0;
}
/*--------------------*/

/* Fillpath (http://www.nizuka.fr/)*/

/*--------------------*/

.color-10 {
  background: #f3cf3f;
}
.nav-fillpath a {
  width: 100px;
  height: 100px;
}
.nav-fillpath .icon-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
  position: absolute;
  left: 50%;
  width: 3px;
  height: 50%;
  background: #566475;
  content: '';
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
  z-index: 100;
  height: 0;
  background: #fff;
  -webkit-transition: height 0.3s, -webkit-transform 0.3s;
  transition: height 0.3s, transform 0.3s;
}
.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
  top: 50%;
  -webkit-transform: translateX(-50%) rotate(-135deg);
  transform: translateX(-50%) rotate(-135deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.nav-fillpath a.next::before,
.nav-fillpath a.next .icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(135deg);
  transform: translateX(-50%) rotate(135deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
  top: 50%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.nav-fillpath a.next::after,
.nav-fillpath a.next .icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}
.nav-fillpath h3 {
  position: absolute;
  top: 50%;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.85em;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpath a.prev h3 {
  left: 100%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
  right: 100%;
  text-align: right;
  -webkit-transform: translateY(-50%) translateX(50%);
  transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
  height: 50%;
}
.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(-125deg);
  transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before,
.nav-fillpath a.next:hover .icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(125deg);
  transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(-55deg);
  transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(55deg);
  transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
  opacity: 1;
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
}
@media screen and (max-width: 520px) {
  .nav-slide a.prev,
  .nav-reveal a.prev,
  .nav-doubleflip a.prev,
  .nav-fillslide a.prev,
  .nav-growpop a.prev {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
  }
  .nav-slide a.next,
  .nav-reveal a.next,
  .nav-doubleflip a.next,
  .nav-fillslide a.next,
  .nav-growpop a.next {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }
  .nav-slide a,
  .nav-reveal a,
  .nav-doubleflip a,
  .nav-fillslide a {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
  .nav-growpop a {
    -webkit-transform: translateY(-50%) scale(0.6);
    transform: translateY(-50%) scale(0.6);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="space_between">
  <h3 class="center_rounded_ol">Man-to-man suggestions</h3>
  <ol class="rounded-list center_rounded_ol">
    <li>
      <a href="" id="foo">Name Surname</a>
    </li>

  </ol>
</section>

<nav class="nav-fillpath">
  <a class="next">
    <span class="icon-wrap"></span>
    <h3><strong>Alexis</strong> Tsipras</h3>
  </a>
</nav>

更新：使用这种方法更好，因为这样可以将JavaScript全部分离在.js或<script>中，而不是让它散布在DOM元素上，因此保持HTML“清洁”，就像内联CSS与外部CSS一样。除了以这种方式进行操作，您还可以轻松地附加多个事件。

这篇文章jQuery.click() vs onClick有更详细的答案。

很好。从我的问题的评论中看来，这种方法更好，而且这不仅仅是你个人的意见。你有什么想法吗？ - gsamaras
4

load()函数中有一个错别字：

function load() {
  $("#foo").trigger('click'); //'r' was missing
}

请注意，这里有一个提示。
$(this)

在burn()函数内部返回window实例，这是否是您期望的结果？

如果您想要更改被单击链接的颜色，请使用以下HTML代码（请注意添加了事件参数）：

<a href="javascript:" id="foo" onclick="burn(this)">Name Surname</a>

和 js：

function burn(element) {
  $(element).css("color", "red");
}

使用这个解决方案，您可以将burn（）函数用于多个链接，而不仅仅是绑定到#foo元素。

1
不必使用 event.target，我认为只需将 this 作为参数传递应该也可以。 - Shikkediel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接