时间戳

首页 > 解决方案 > jquery单击一个函数执行另一个

html - jquery单击一个函数执行另一个

问题描述

抱歉，这里有点 jQuery 菜鸟，但我有这个 jquery+css 设置，我有一些代码可以在点击时换出文本，我不禁认为解决方案很简单，但我错过了它.. .

https://jsfiddle.net/0nqet8cz/5/

第一个代码在单击时将可见文本替换为隐藏文本（参见 Fiddle 输出行 #3）。

$(document).ready(function(){
$(function() {
$("span.really4").click($.fn.myCustomFunction= function(){
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}

我使用的HTML如下：

<span class="really4" data-text-swap="(Hide Reference)">(Show Reference)</span>

当您单击可见文本时，第二个切换文本显示（小提琴输出行＃4）。

$(document).ready(function(){
$(".text_container").addClass("hidden");
$(".text_container").click(function() 
var $this = $(this);
if ($this.hasClass("hidden")) {
$(this).removeClass("hidden").addClass("visible");
} else {
$(this).removeClass("visible").addClass("hidden");
}

我使用的html如下：

<span class="text_container"><span>"Hidden Text 1"</span> Visible Text 1</span>

不同之处当然是可见文本始终保留在后一个代码中。

然而，问题是当我将 HTML 从第一个嵌入到第二个（小提琴输出行 #1 和 #2）中时：

<span class="text_container">
<span class="really4" data-text-swap="Hidden">Visible Text</span>

<span>"Hidden Text 2"</span> 

Visible Text 2

</span>

当我单击“可见文本”时，文本切换为“隐藏文本”并且“隐藏文本 2”出现在跨度中。

但是，当我单击“可见文本 2”时，它不会为“隐藏文本”切换“可见文本”，而只会出现“可见文本 2”。

我怎样才能编辑代码来做这两个？

标签： htmljquerycssevents

解决方案

我试图让触发器（“点击”）工作，但它似乎是循环的，因为点击一个部分有时会随机触发另一个部分

当您触发点击时，您必须防止它冒泡。

$("span.really4").click(
  ($.fn.myCustomFunction = function (e) { // pass the event
    e.stopPropagation() // stop propagation
    // ...
  })
)

$(".text_container").click(function () {
  // ...
  $this.find(".really4").click() // trigger the click
})

阅读更多：event.stopPropagation()

更新

...我嵌入的 real4 类不会触发 .text_container 中的跨度来执行允许隐藏文本出现在跨度中的功能

该.really4元素不需要自己的事件侦听器：

$(function () {
  $(".text_container").addClass("hidden")
  $(".text_container").click(function() {
    const $this = $(this)
    const $span = $this.find(".really4")
    if ($span.text() === $span.data("text-swap")) {
      $span.text($span.data("text-original"))
      $this.addClass("hidden")
    } else {
      $span.data("text-original", $span.text())
      $span.text($span.data("text-swap"))
      $this.removeClass("hidden")
    }
  })
})

更新

我不知道这是否是一种粗略的方式，但我很想知道@charles 或@Terminator-Barbapapa 是否有更优雅的方式来做到这一点。

这是一种需要考虑的方法：1）创建一个单独的函数；.really42）从和单击处理程序调用该函数.text-container（而不是触发单击）。

$(function() {
  $(".text_container").addClass("hidden")

  $(".really4").click(function(e) {
    e.stopPropagation()
    swap(this)
    $(this).parent(".text_container").toggleClass("hidden")
  })

  $(".text_container").click(function(e) {
    const $this = $(this)
    $this.find(".really4").each(swap)
    $this.toggleClass("hidden")
  })
})

// New function
function swap(element) {
  $this = $(element)
  $this.text() === $this.data("text-swap")
    ? $this.text($this.data("text-original"))
    : $this.data("text-original", $this.text()).text($this.data("text-swap"))
}

推荐阅读