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

Question

我有以下几行 HTML 代码由 PHP 插件脚本生成，我不想直接修改它们（为了将来的升级兼容性目的）。

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

<img id="rating_1981_1" src="./rating_1_on.gif" alt="Down" 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" alt="Up" 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是动态生成的，是否可以通过Javascript 选择器使用 class="post-ratings"?

如何通过 Javascript 或 jQuery 实现？

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

Answer 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" alt="Down" 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" alt="Up" 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

Answer 2

我这样做只用了jquery。我添加了向上 img css 属性 float:left 和向下 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>');
   })
})

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

How to swap HTML image tags with Javascript using class selector of its parent?

html

javascript

jquery

css-selectors

jquery-selectors