如何使用javascript动态更改文本

时间:2014-12-13 09:09:33

标签: javascript

我在屏幕截图库中添加了“喜欢”功能。当有人喜欢的时候,我已经成功地将颜色改为红色......并且当不同时再回到灰色......然后一个PHP脚本处理所有的DB魔法。

但我无法理解如何更改显示的实际文本值;即如果有人喜欢,将文本从10更改为11.如果不同,则从2更改为1,等等。

有人可以建议一种方法来研究吗?

这些是我的javascript& html片段,如果他们帮助。我想在此处更改的HTML中的文本由“$ row ['Likes']”

表示
                $(".ajax-unlike").submit(function(){
                    var refid = $(this).find('input[name="refid"]').val();
                    var data = {
                      "action": "unlike"
                      };
                    data = $(this).serialize() + "&" + $.param(data);
                      $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "galleryajax.php", //Relative or absolute path to response.php file
                        context: document.getElementById(refid), //!! ADD THIS
                        data: data,
                        success: function(data) { //!! REMOVE refid FROM HERE
                          $(this).removeClass("thumb-comment-red", 1000);
                      }
                      });
                    return false;
                    });


<span class="thumb-comment" id="like'.$row['GalleryID'].'">
                <form class="ajax-like" method="post" accept-charset="utf-8">
                  <input type="hidden" name="mcname" value="'.$user->profile_fields['pf_minecraftname'].'" />
                  <input type="hidden" name="galleryid" value="'.$row['GalleryID'].'" />
                  <input type="hidden" name="refid" value="like'.$row['GalleryID'].'" />
                  <input type="hidden" name="likerswithoutthisuser" value="'.str_replace($user->profile_fields['pf_minecraftname'],"",$row['Likers']).'" />
                    <button type="submit" style="border: 0; background: none;">
                    <i class="fa fa-heart"></i>
                    '.$row['Likes'].'
                    </button>
                    </form>
                </span>

下面的评论新代码

            //Look for forms with "like" class
            $(".ajax-like").submit(function(){
                var refid = $(this).find('input[name="refid"]').val();
                var btnrefid = "button#" + refid;
                var formrefid = "form#" + refid;
                var data = {
                  "action": "like"
                  };
                data = $(this).serialize() + "&" + $.param(data);
                  $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "galleryajax.php", //Relative or absolute path to response.php file
                    context: document.getElementById(refid),
                    data: data,
                    success: function(data) { 
                      $(this).addClass("thumb-comment-red", 1000);
                      $(btnrefid).html("<i class='fa fa-heart'></i> " + data["newlikes"]);
                      //Now stop further changes from recording based on submissions from this specific form
                      $(formrefid).submit(function(){
                            alert("You have already liked or unliked this screenshot. Please reload the page if you want to change your mind.");
                            });
                  }
                  });
                return false;
                });

2 个答案:

答案 0 :(得分:2)

看看innerHTML,如:

document.getElementById("demo").innerHTML = "value";

或JQ方式

$(selector).html("value");

答案 1 :(得分:1)

     success: function(data) { //!! REMOVE refid FROM HERE
                              $(this).removeClass("thumb-comment-red", 1000).innerHTML="UR New TEXT HERE";

//can even use $(element).text("text") or $(element).html("<span>TEXT</span>") like any html elements can be added according to requirement if you plan to use jquery//
                          }