如何使用其父类选择器将 HTML 图像标签与 Javascript 交换？

Posted 2023-05-09

【中文标题】如何使用其父类选择器将 HTML 图像标签与 Javascript 交换？

【英文标题】：How to swap HTML image tags with Javascript using class selector of its parent?

【发布时间】：2017-05-27 05:23:22

【问题描述】：

我有以下几行由 php 插件脚本生成的 html 代码，我不想直接修改（出于将来升级兼容性的目的）。

<div id="post-ratings-1981" class="post-ratings" data-nonce="0ab2fb33f4">

<img id="rating_1981_1" src="./rating_1_on.gif"  title="Down" onmouseover="current_rating(1981, 1, 'Down');" onmouseout="ratings_off(2.5, 3, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />

<img id="rating_1981_2" src="./rating_2_on.gif"  title="Up" onmouseover="current_rating(1981, 2, 'Up');" onmouseout="ratings_off(2.5, 3, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />

</div>

基本上它会输出一个不赞成和赞成的投票图标。

我想交换输出位置，使其先显示竖起大拇指图标，然后显示大拇指向下，这样更符合逻辑。

我发现如果我不能直接修改控制输出的PHP脚本代码，并且post-id是动态生成的，是否可以使用class="post-ratings"通过javascript选择器来完成？

这如何通过 Javascript 或 jQuery 实现？

PS：在给定的列表页面上，我可能有多个上述<div> 块和class="post=ratings"。

【问题讨论】：

将position: relative 放在div 上，将position: absolute 放在img 元素上。然后，您可以根据需要在 CSS 中交换他们的 left 位置。但是，我强烈建议您在 PHP 源代码中执行此操作，因为您可以访问它，并且还考虑使用不显眼的 JS 事件处理程序，而不是丑陋和过时的 on* 事件属性。

div 是硬编码在 php 脚本中的，我无法修改。

那你就可以使用我提到的CSS方法了。但是我不明白为什么你不能修改 PHP 如果你可以访问它。

因为它是一个 Wordpress 插件，并且会不时更新。如果它被更新，所有自定义修改都将被覆盖。根据您的建议，我正在尝试使用css，并且在 Chrome 开发人员工具中使用<img id="rating_1981_2" style="float:left"> 似乎起到了交换的作用。但是，如何创建 css 规则，以便包裹在其父级 div 的 post-ratings 类中的第二个 img 元素注入 float:left;？如果你能得到这个css 作为答案，我很乐意接受它作为我问题的解决方案。谢谢。

是的——这完全有道理——我错过了你解释它是第三方插件的第一段。接听来电。

【参考方案1】：

要实现这一点，您可以使用 CSS。如果将position: relative 放在父div 元素上，然后将position: absolute 放在img 元素上，则可以将它们放置在需要的任何位置。试试这个：

// only here to stop console errors:
function ratings_off() 
function current_rating() 

.post-ratings  
  position: relative; 
  width: 100px;

.post-ratings img  
  position: absolute;
  width: 50px;

.post-ratings img:nth-child(1)  right: 0; 
.post-ratings img:nth-child(2)  left: 0; 

<div id="post-ratings-1981" class="post-ratings" data-nonce="0ab2fb33f4">
  <img id="rating_1981_1" src="./rating_1_on.gif"  title="Down" onmouseover="current_rating(1981, 1, 'Down');" onmouseout="ratings_off(2.5, 3, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />
  <img id="rating_1981_2" src="./rating_2_on.gif"  title="Up" onmouseover="current_rating(1981, 2, 'Up');" onmouseout="ratings_off(2.5, 3, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" />
</div>

您可以使用 JS 代码来执行此操作，但是由于 UI 加载时执行延迟，您最终可能会得到 FOUC

【参考方案2】：

我以这种方式只使用 jquery。我为 up img 添加 css 属性 float:left 和为 down img 添加属性 float:right。然后我附加一个带有 css 属性 clear:both 的跨度来清除左右浮动。

https://jsfiddle.net/byejkqg4/1/

$(document).ready(function()
   $(".post-ratings").each(function()
      $(this).find('img').eq(1).css('float','left');
      $(this).find('img').eq(0).css('float','right');
      $(this).find('img').eq(1).after('<span style="clear:both"></span>');
   )
)

【讨论】：

根据您的 jsfiddle 代码，结果不是交换位置，我仍然以原始顺序看到图像。 Up应该首先出现在哪里，然后是Down