如何在不修改 HTML 的情况下在 jQuery 中添加指向伪元素的链接？ - 更新 > Functions.php

Posted 2023-05-09

【中文标题】如何在不修改 HTML 的情况下在 jQuery 中添加指向伪元素的链接？ - 更新 > Functions.php

【英文标题】：How add a link to a pseudo element in jQuery without modifying HTML? - Updated > Functions.php

【发布时间】：2019-12-29 21:11:22

【问题描述】：

我正在尝试将 url 分配给 h1 旁边的伪元素 (button)。我正在处理一个我无法修改的特定 WordPress 页面，因为 h1 是 entry-title。

问题是我不能使用h1.entry-title::after 来分配链接。有人可以帮帮我吗？

var $j = jQuery.noConflict();

$j(document).ready(function() 
  $j("h1.entry-title::after").click(function() 
    window.open('http://www.google.com/');
  );
);

#pageid1 h1.entry-title::after 
  content: 'contact Yes Link';
  right: 80px;
  position: absolute;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  padding: 0px 13px;
  background-color: #95c11e;
  box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
  -webkit-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
  -moz-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pageid1">
  <h1 class="entry-title"> Title Page - No Link </h1>
</div>

【问题讨论】：

您不能将链接分配给伪元素。伪元素不能转换为链接，它们不能有事件监听器

如果您能够添加 wordpress action，那么只需在 h1

中添加 real 链接

我试过了，但它不起作用，反正我不是 php 开发人员和开发人员。 Customizr主题并不回答我的问题。 add_action ('__before_archive_title', 'button_beside_title'); function button_beside_title() if ( !is_page( array( '3154' ) ) ) echo 'Text Example';

如果您想获得帮助或在 wordpress stackexchange 中提问，请添加 wordpress 和 php 标签……实际上，您的问题不会使用 CSS/jQuery 得到任何解决方案。它很快就会被关闭作为重复 span>

谢谢 Temani，我不想要链接 H1，但只想要按钮，我做了这个动作 ``` add_action ('__before_archive_title', 'button_link');函数 button_link ( $link ) if ( !is_page( '3154' ) ) $link = 'website.com'; ``` 鼠标箭头可以看到链接，但是 url 不起作用。我做错了什么？

【参考方案1】：

您可以使用 javascript 获取伪内容并将链接附加到 H1。

这是 CSS 代码：

/* Add pseudo at first */
#pageid1 h1.entry-title::after 
   content: 'contact Yes Link';
   right: 80px;
   position: absolute;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   color: #fff;
   font-size: 28px;
   font-weight: 600;
   padding: 0px 13px;
   background-color: #95c11e;
   box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   -webkit-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   -moz-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   text-decoration: none;
   display: inline-block;
   cursor: pointer;


/* Remove pseudo */
#pageid1 h1.entry-title.pseudoed::after 
   display: none;


/* Style your link like pseudo */
#pageid1 h1.entry-title .my-pseudo-link 
   right: 80px;
   position: absolute;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   color: #fff;
   font-size: 28px;
   font-weight: 600;
   padding: 0px 13px;
   background-color: #95c11e;
   box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   -webkit-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   -moz-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   text-decoration: none;
   display: inline-block;
   cursor: pointer;

这里是 JS/jQuery 代码：

var $j = jQuery.noConflict();

$j(document).ready(function() 
   var pseudoLink = $j('<a href="https://google.com"></a>').html(window.getComputedStyle(document.querySelector('#pageid1 h1.entry-title'), ':after').getPropertyValue('content'));
   $j('#pageid1 h1.entry-title').addClass('pseudoed').append(pseudoContent);
);