如何在执行触发clcik时传递参数

Question

我根据点击字母来过滤数据。 这段代码工作正常。

我的问题是

如果用户在搜索下输入值并按搜索按钮，我正在执行触发点击事件。

是否可以在触发点击事件下知道该呼叫来自搜索按钮

$(document).ready(function() {
  $('.letter[data-alphabetname="a"]').trigger('click');
});

$(document).on("click", ".letter", function(event) {
  var alphabetname = $(this).data('alphabetname');
  if (!alphabetname || alphabetname == '') {
    alphabetname = 'a'
  }
  console.log(alphabetname);
});

$(document).on("click", "#button2", function(event) {
  var searchTerm = $.trim($("#searchinput").val());
  var toclickalphabet = searchTerm.charAt(0);
  toclickalphabet = toclickalphabet.toLowerCase();
  $('.letter[data-alphabetname="' + toclickalphabet + '"]').trigger('click');
});

* {
  box-sizing: border-box;
}
ul {
  list-style: none;
}
ul li {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid black;
  background-color: #efefef;
}
#container .element {
  width: 40px;
  height: 80px;
  margin: 3px;
  border: 1px solid black;
}
.a {
  background-color: red;
}
.b {
  background-color: green;
}
.c {
  background-color: blue;
}
/* Ensures specificity is higher that #container .element */

#container .element.width2 {
  width: 86px;
}
#container .element.height2 {
  height: 166px;
}
.portfolio_projects_hide {
  display: none;
}
/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="alphabet">
  <li class="letter" data-alphabetname="a">A</li>
  <li class="letter" data-alphabetname="b">B</li>
  <li class="letter" data-alphabetname="c">C</li>
  <li class="letter" data-alphabetname="d">D</li>
  <li class="letter" data-alphabetname="e">E</li>
  <li class="letter" data-alphabetname="f">F</li>
  <li class="letter" data-alphabetname="g">G</li>
  <li class="letter" data-alphabetname="h">H</li>
  <li class="letter" data-alphabetname="i">I</li>
  <li class="letter" data-alphabetname="j">J</li>
  <li class="letter" data-alphabetname="k">K</li>
</ul>

<p>Input field:
  <input type="text" id="searchinput">
</p>
<input type="button" id="button2" value="Search" />

This is my fiddle

Answer 1

您可以在使用trigger()

时传递其他参数

$('.letter[data-alphabetname="' + toclickalphabet + '"]').trigger({
    type: "click",
    customSource: "search button"
});

可以使用event

访问

$(document).on("click", ".letter", function(event) {
    console.log(alphabetname, event.customSource);
});

$(document).ready(function() {
   $('.letter[data-alphabetname="a"]').trigger('click');
});
$(document).on("click", ".letter", function(event) {
  var alphabetname = $(this).data('alphabetname');
  if (!alphabetname || alphabetname == '') {
    alphabetname = 'a'
  }

  console.clear();
  console.log(alphabetname, event.customSource);
});

$(document).on("click", "#button2", function(event) {
  var searchTerm = $.trim($("#searchinput").val());
  var toclickalphabet = searchTerm.charAt(0);
  toclickalphabet = toclickalphabet.toLowerCase();

  $('.letter[data-alphabetname="' + toclickalphabet + '"]').trigger({
    type: "click",
    customSource: "search button"
  });
});

* {
  box-sizing: border-box;
}
ul {
  list-style: none;
}
ul li {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid black;
  background-color: #efefef;
}
#container .element {
  width: 40px;
  height: 80px;
  margin: 3px;
  border: 1px solid black;
}
.a {
  background-color: red;
}
.b {
  background-color: green;
}
.c {
  background-color: blue;
}
/* Ensures specificity is higher that #container .element */

#container .element.width2 {
  width: 86px;
}
#container .element.height2 {
  height: 166px;
}
.portfolio_projects_hide {
  display: none;
}
/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="alphabet">
  <li class="letter" data-alphabetname="a">A</li>
  <li class="letter" data-alphabetname="b">B</li>
  <li class="letter" data-alphabetname="c">C</li>
  <li class="letter" data-alphabetname="d">D</li>
  <li class="letter" data-alphabetname="e">E</li>
  <li class="letter" data-alphabetname="f">F</li>
  <li class="letter" data-alphabetname="g">G</li>
  <li class="letter" data-alphabetname="h">H</li>
  <li class="letter" data-alphabetname="i">I</li>
  <li class="letter" data-alphabetname="j">J</li>
  <li class="letter" data-alphabetname="k">K</li>
</ul>

<p>Input field:
  <input type="text" id="searchinput">
</p>
<input type="button" id="button2" value="Search" />

此外，您还可以将直接参数用于事件处理程序。当正常点击触发时，customSource将被取消定义，而像click这样的触发器会引用“搜索按钮”

$(document).ready(function() {
   $('.letter[data-alphabetname="a"]').trigger('click');
});
$(document).on("click", ".letter", function(event, customSource) {
  var alphabetname = $(this).data('alphabetname');
  if (!alphabetname || alphabetname == '') {
    alphabetname = 'a'
  }

  console.clear();
  console.log(alphabetname, customSource);
});

$(document).on("click", "#button2", function(event) {
  var searchTerm = $.trim($("#searchinput").val());
  var toclickalphabet = searchTerm.charAt(0);
  toclickalphabet = toclickalphabet.toLowerCase();

  $('.letter[data-alphabetname="' + toclickalphabet + '"]').trigger("click", [
    "search button" ]);
});

* {
  box-sizing: border-box;
}
ul {
  list-style: none;
}
ul li {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid black;
  background-color: #efefef;
}
#container .element {
  width: 40px;
  height: 80px;
  margin: 3px;
  border: 1px solid black;
}
.a {
  background-color: red;
}
.b {
  background-color: green;
}
.c {
  background-color: blue;
}
/* Ensures specificity is higher that #container .element */

#container .element.width2 {
  width: 86px;
}
#container .element.height2 {
  height: 166px;
}
.portfolio_projects_hide {
  display: none;
}
/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="alphabet">
  <li class="letter" data-alphabetname="a">A</li>
  <li class="letter" data-alphabetname="b">B</li>
  <li class="letter" data-alphabetname="c">C</li>
  <li class="letter" data-alphabetname="d">D</li>
  <li class="letter" data-alphabetname="e">E</li>
  <li class="letter" data-alphabetname="f">F</li>
  <li class="letter" data-alphabetname="g">G</li>
  <li class="letter" data-alphabetname="h">H</li>
  <li class="letter" data-alphabetname="i">I</li>
  <li class="letter" data-alphabetname="j">J</li>
  <li class="letter" data-alphabetname="k">K</li>
</ul>

<p>Input field:
  <input type="text" id="searchinput">
</p>
<input type="button" id="button2" value="Search" />