Question

所以我有一个html模板：

      <div style='background-color: red;'>
          <div>
                $QuestionUpButton
              <%--<img style="cursor: pointer" onclick="onAddQUestionVote" src="../../Images/arrow-up-24-ns.png" data-questionvoteupbutton="$i" id='addQuestionVote' alt='Vote up' data-questionid='$questionUid' />--%>
              <span data-questionvotegroup='$i'>$QuestionVote</span>
              <span data-questiontextgroup='$i'>$textboxText<br />
              </span>
          </div>
          <div id="mm" style='background-color: white;'>
              $AnswerUpVote
              <%--<img style="cursor: pointer" onclick="onAddAnswerVote" src="../../Images/arrow-up-24-ns.png" data-answervoteupbutton="$i" id='addAnswerVote' alt='Vote up' data-answeruid='$answerGuid' />--%>
              <img style="cursor: pointer" onclick="onRemoveAnswerVote" src="../../Images/arrow-down-24-ns.png" data-answervotedownbutton="$i" id='removeAnswerVote' alt='Vote down' data-answeruid='$answerGuid' />
              <span data-answervotegroup='$i'>$AnswerVotes</span>
              <span data-labelgroup='$i'>Answer : </span>
              <span data-answertextgroup="$i" data-questionid='$questionUid' data-answerid="$answerGuid">$AnswerSpan</span>
              <input type='button' id='editButton' data-editlinkbuttongroup="$i" value='Edit' />
              <input type='button' id='deleteButton' data-deletelinkbuttongroup="$i" value='Delete Question' />
          </div>

      </div>

在文档加载上我运行代码，其中我替换所有$变量，如下所示：

function MyFunction(result) {
    //console.log(result);
    var panel = $('#mypanel');
    var userGuid = GetUserGuid().d;
    var panel = $('#MainContent_AnsweredQuestions_mypanel');

    for (var k = 0; k < result.d.length; k++) {
        var notVotedQuestion = "<img style='cursor: pointer' onclick='onAddQUestionVote' src='../../Images/arrow-up-24-ns.png' data-questionvoteupbutton='" + i + "' id='Img1' alt='Vote up' data-questionid='" + result.d[k].Uid + "' />";
        var notVotedQuestion1 = "hulabula";
        var notVotedAnswer = "notVotedAnswer";
        var votedAnswer = "";

        console.log(result.d[k].Uid)
        var html = $("#OwnerTemplateQuestionWithoutAnswer").html().replace(/\$i/g, i)
            .replace(/\$AnswerSpan/g, result.d[k].Answers[0].Conetent)
            .replace(/\$answerGuid/g, result.d[k].Answers[0].Uid)
            .replace(/\$questionUid/g, result.d[k].Uid)
            .replace(/\$QuestionVote/g, result.d[k].QuestionVotes.length)
            .replace(/\$AnswerVotes/g, result.d[k].Answers[0].AnswerVotes.length)
            .replace(/\$textboxText/g, result.d[k].Content);

        //var html1 = $("#OwnerTemplateQuestionWithoutAnswer").html(html);

        if (didUserVote(result.d[k], userGuid) == false){
            html.html().replace("$AnswerUpVote", notVotedQuestion); 
        }

        panel.append(html);
        i++;


    }

}

我第一次更换的部分工作得非常好，我想要的确实如何：

 var html = $("#OwnerTemplateQuestionWithoutAnswer").html().replace(/\$i/g, i)
                .replace(/\$AnswerSpan/g, result.d[k].Answers[0].Conetent)
                .replace(/\$answerGuid/g, result.d[k].Answers[0].Uid)
                .replace(/\$questionUid/g, result.d[k].Uid)
                .replace(/\$QuestionVote/g, result.d[k].QuestionVotes.length)
                .replace(/\$AnswerVotes/g, result.d[k].Answers[0].AnswerVotes.length)
                .replace(/\$textboxText/g, result.d[k].Content);

但稍后在代码中我需要以不同的方式加载图像取决于某些条件

   if (didUserVote(result.d[k], userGuid) == false){
        html.html().replace("$AnswerUpVote", notVotedQuestion); 
    }

并且这部分的cide根本不起作用...关于如何解决这个问题的任何建议，或者我如何以某种方式改进替换？

Answer 1

改变这个：

html.html().replace("$AnswerUpVote", notVotedQuestion);

对此：

var html = $("#OwnerTemplateQuestionWithoutAnswer");
html.html(html.html().replace("$AnswerUpVote", notVotedQuestion));

你的代码不起作用的原因是因为在第一个实例中你将新的Html分配给var html;之后，由于已经创建了对象，因此需要将其Html值设置为自身的更新（替换/过滤）html代码。当你调用.html（）时，你得到一个按值而不是通过引用传递的字符串，这就是为什么当你只是替换.html（）时，你正在替换它，但是你没有对结果做任何事情

Answer 2

嗯，我不确定你是否已经为上述方案做出了解决方案，但我强烈建议你使用小胡子js。

Mustache是一种“无逻辑”模板语法。 “无逻辑”意味着它不依赖于程序语句（if，else，for等）：Mustache模板完全用标签定义。

所以你不需要上面难以理解javascript逻辑来做你想做的事。

检查Mustache.JS及其template教程。

Jquery分别在html字符串中替换2次

2 个答案: