JavaScript按类别和ID从标记中编辑InnerHTML
[英]JavaScript edit InnerHTML from a tag by class and id
问题描述
For these links 
对于这些链接
<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>
I try to edit their content on click based on each id and class. 我尝试根据每个ID和类别在点击时编辑其内容。
Ultil now I have used Ultil现在我已经用过
$('.article_delete').html('<img src="images/loader.gif" class="loading" />');
But every .article_delete class from page is changing the InnerHTML content. 但是页面中的每个.article_delete类都在更改.article_delete内容。 I tried this: 我尝试了这个：
$('.article_delete#'+article_id).html('<img src="images/loader.gif" class="loading" />');
and this (from a stackoverflow similar post): 这（来自类似stackoverflow的文章）：
document.getElementById(article_id).getElementsByClassName("article_delete")[0].html('<img src="images/loader.gif" class="loading" />');
Any solution? 有什么办法吗？ I want to select only .article_delete where id="something" . 我只想选择.article_delete其中id="something" 。
4 个解决方案
解决方案1
2 2016-09-10 16:07:43
<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>
Now take a look at js: 现在看看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>
解决方案2
1 2016-09-10 16:05:21
To get element by ID you must use the Prefix # : 要通过ID获得元素，您必须使用Prefix # ：
$('#' + ELEM_ID )
To get element by CLASS you must use the Prefix . 要按CLASS获取元素，必须使用Prefix . : ：
$('.' + ELEM_ID )
To get element by TAG you must use enter the tag name without any prefix: 要通过TAG获取元素，必须使用输入标签名称且不带任何前缀：
$('div')
There are many type of selectors and you can combine selectors to get specific result 选择器类型很多，您可以组合选择器以获得特定结果
In your example you can use the this to access clicked element and change it. 在您的示例中，您可以使用this来访问clicked元素并进行更改。
Example: 例：
$('.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>
解决方案3
1 已采纳 2016-09-15 20:48:31
I finally found the solution myself. 我终于找到了解决方案。 Because i needed the ids from each div to parse them with ajax to php i added just another class for each link. 因为我需要每个div的id来用ajax解析它们到php，所以我为每个链接添加了另一个类。 Here is an example: 这是一个例子：
PHP 的PHP
<a class="color-transition article_spam_flag asf'.$id.'" href="#" id="'.$id.'"><i class="fa fa-flag"></i></a>
JS 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; }); });
解决方案4
0 2016-09-10 11:40:51
Use Id, something like this, 使用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>
and in js for any one say for id unique_id1 并在js中对ID说“ unique_id1任何人说
$('#unique_id1').html('<img src="images/loader.gif" class="loading" />');
for both 对彼此而言
$('#unique_id1,#unique_id2').html('<img src="images/loader.gif" class="loading" />');
By using class, only that class where you want this 通过使用类，仅在您需要的那个类上
$('.adding-img').html(''); $（'。adding-img'）。html（''）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.