Question

我有一个像这样的简单div标签

    <div id="mydiv"> text inside the div </div>

我需要一个脚本，当我点击“mydiv”的单个单词时，将该单词变成红色（并将单词保存为变量）。我可以在一个范围内包围每一个字，但我正在寻找更清洁的解决方案。可能吗？抱歉我的英语很差。

到目前为止，我没有尝试过任何事情。我还在考虑解决方案。我可以很容易地解决围绕每个单词的问题，但在写作之前我想确保不存在更简单的解决方案。对不起

Answer 1

我认为这就是你想要的：

JavaScript：UPADTE

JSFiddle : DEMO

function mynew() {
    var myDiv = document.getElementById('mydiv');
    var contents = myDiv.innerHTML.split(" ");
    var modText = '';

    for (var i = 0; i < contents.length; i++) {
        modText += '<span>' + contents[i] + '</span> ';
    }
    myDiv.innerHTML = modText;

    window.onclick = myFunction;

    function myFunction(e) {
        e.target.className = "change";
        /* STORED IN "SELECTED" VARIABLE */     
        var selected = e.target.innerHTML;
        alert('Selected: ' + selected);
    }
}

span.change {
    color: red;
}
span {
    color:black;
}

<body onload="mynew();">
    <div id="mydiv" class="new">text inside the div</div>
  </body>

JQuery：上一篇文章

$(function() {
  var contents = $('#mydiv').text().split(' '),
    modText = '';

  for (var i = 0; i < contents.length; i++) {
    modText += '<span>' + contents[i] + '</span> ';
  }

  $('#mydiv').html(modText);

  $('#mydiv').click(function(e) {
    $(e.target).toggleClass('change');
    /* STORING EVERY WORD IN VARIABLE NAMED 'SELECTED' */
    var selected = [];
    $('span.change').each(function() {
      selected.push($(this).text());
    });
    alert('Selected: ' + selected.join(','));
  });
});

span.change {
  color: red;
}
span {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">text inside the div</div>

注意：如果您不想切换颜色更改，请删除toggleClass()并添加addClass。

兼容性：适用于Webkit和Mozilla以及IE9 +

Answer 2

瞧，

function change (id,text) {

    var yazi = $('#'+id).text();
    var adet = yazi.split(' ');

    $('#'+id).html('');

    for (i=0,v=adet.length;i<v;i++) {

        if(adet[i]==text) {
            $('#'+id).append("<span style=\"color:#F00\">"+ adet[i]+"<span> ")
        } else {
            $('#'+id).append(adet[i]+" ");
        }
    }

}

致电

change('mydiv','inside');

javascript：将单个单词的颜色更改为<div>

2 个答案: