JavaScript 按类和 id 从标签编辑 InnerHTML

JavaScript edit InnerHTML from a tag by class and id

本文关键字：标签 编辑 InnerHTML id JavaScript      更新时间：2023-09-26

>对于这些链接

<div class="post_actions"> 
    <a class="color-transition article_delete" href=""><i class="fa fa-pencil"></i></a>
    <a class="color-transition article_edit" href="#" id="1"><i class="fa fa-pencil-square-o"></i></a>
</div>

我尝试根据每个 id 和类在点击时编辑他们的内容。

Ultil 现在我已经用了 

$('.article_delete').html('<img src="images/loader.gif" class="loading" />');

但是页面的每个.article_delete类都在更改 InnerHTML 内容。我试过这个：

$('.article_delete#'+article_id).html('<img src="images/loader.gif" class="loading" />');

而这个(来自一个堆栈溢出类似的帖子(：

document.getElementById(article_id).getElementsByClassName("article_delete")[0].html('<img src="images/loader.gif" class="loading" />');

有什么解决办法吗？我只想选择.article_delete id="something"的地方。

<div class="post_actions"> 
<a class="color-transition article_delete" href="" id="test-2"><i class="fa fa-pencil"></i></a>
<a class="color-transition article_edit" href="#" id="test-1"><i class="fa fa-pencil-square-o"></i></a>
</div>

现在看看js：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(".post_actions").on("click","[id^=test]",function(){
  $(this).html("your new html");
})
</script>

要按 ID 获取元素，您必须使用前缀#：

$('#' + ELEM_ID )

要通过 CLASS 获取元素，您必须使用前缀.：

$('.' + ELEM_ID )

要通过 TAG 获取元素，您必须使用输入不带任何前缀的标签名称：

$('div')

有许多类型的选择器，您可以组合选择器以获得特定结果

jQuery 选择器

在您的示例中，您可以使用this访问单击的元素并对其进行更改。

例：

$('.article').on("click", function(){
  $(this).html('<span>LOADING ... </span>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <body>
    
    <div class="post_actions"> 
      <a class="color-transition article" href="#">ACTION 1</a>
      <br>
      <a class="color-transition article" href="#">ACTION 2</a>
      <br>
      <a class="color-transition article" href="#">ACTION 3</a>
      <br>
      <a class="color-transition article" href="#">ACTION 4</a>
      <br>
      <a class="color-transition article" href="#">ACTION 5</a>
      <br>
      <a class="color-transition article" href="#">ACTION 6</a>
    </div>

我终于自己找到了解决方案。因为我需要每个div 的 id 来使用 ajax 将它们解析为 php，所以我为每个链接添加了另一个类。下面是一个示例：

.PHP

 <a class="color-transition  article_spam_flag asf'.$id.'" href="#" id="'.$id.'"><i class="fa fa-flag"></i></a>

.JS

$(function() {
$(".article_spam_flag").click(function() {
var article_id = $(this).attr("id");
var dataString = 'article_id='+article_id;  
//$('a#'+article_id).removeClass('liked');
//document.getElementById(article_id).getElementsByClassName("article_spam_flag")[0].html('<img src="images/loader.gif" class="loading" />');
//$('.article_spam_flag#'+article_id).html('<img src="images/loader.gif" class="loading" />'); 
  //$(this).html('<img src="images/loader.gif" class="loading" />'); 
  $('.asf'+article_id).html('<img src="images/loader.gif" class="loading" />'); 
$.ajax({
	type: "POST",
	url: "action/article_spam_flag.php",
	data: dataString,
	cache: false,
	success: function(data){
    if (data == 0) {
	alert('Actiunea nu a putut fi realizata!');
	} else {
	//$('.article_spam_flag').fadeIn("slow").html(data);
	$('.asf'+article_id).fadeIn("slow").html(data);
	//$(this).fadeIn("slow").html(data);
	//window.location.href="contact.php?categorie=ArticolFlag: "+article_id;
	//floating contact
	}
	}  
});
return false;
});
});

使用 Id，像这样，

 <div class="post_actions"> 
 <a class="color-transition article_delete adding-img" id="unique_id1" href=""><i class="fa fa-pencil"></i></a>
 <a class="color-transition article_edit adding-img" href="#" id="unique_id2"><i class="fa fa-pencil-square-o"></i></a>
    </div>

在 js 中，任何人都可以说 id unique_id1 

$('#unique_id1').html('<img src="images/loader.gif" class="loading" />');

对于两者 

$('#unique_id1,#unique_id2').html('<img src="images/loader.gif" class="loading" />');

通过使用类，只有你想要这个的那个类

$('.adding-img'(.html(''(;

相关文章：