0

我正在尝试使用带有 jQ​​uery 的文本来做到这一点：

例子

我需要一个数组，并在每个 x 个单词的应答器中添加图像。（x 是一个随机数）。

使用 jQuery 可以很容易地计算单词：

var count = $("#example1").text().replace(/ /g,'').length;

如何将图像随机添加到文本中？

4

3 回答 3

1

您必须用新的 html 替换整个 html（只有文本的那个），其中包括图像：

html:

<div>one two three</div>

js：

var wordList = $("div").html().split(' ');
var newHtml = '';

$.each(wordList, function(index, word){
  newHtml += ' ' + word;
  if (index == 1) {
    newHtml += '<img src="http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif" />'     
  }        
});
$('div').html(newHtml)

jsfiddle上的示例

于 2012-05-07T15:20:25.497 回答
1

演示：

http://jsbin.com/ajowib/2/ - 循环图像数组，序列 3，偏移量 2

http://jsbin.com/ajowib/ - 不循环，序列 5，偏移量 3

HTML：

<div id="myText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

JavaScript：

jQuery(function($) {
    var images = ["img1.png", "img2.png", "img3.png"], // Array to contains image url's
        sequence = 5, // The sequence of witch the images is inserted
        sequenceOffset = 3, // The offset from the start
        loopImages = true, // If you want to loop throw your image array again and again            

        text = $("#myText").html().split(" "),
        newText = [],
        i = 0, y = 0,
        len = text.length;

    for( ; i < len; i++ ) {
        if ( (i % sequence) === sequenceOffset ) {
            if ( loopImages || y < images.length ) {
                newText.push("<img src='" + images[y%images.length] + "'/>");
                y++;
            }
        }
        newText.push(text[i]);
    }

    $("#myText").html(newText.join(" "));
});
于 2012-05-08T08:36:50.917 回答
0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnImage').on('click', function () {
                var imageText = ['one', 'two', 'three'];
                var imageArraySrc = ['http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif', 'http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif', 'http://www.newarkadvertiser.co.uk/weather/icons/white-cloud.gif'];
                var text = $('div#example1').text();

                $.each(imageText, function (i, value) {
                    text = text.replace(new RegExp(value, 'g'), value + ' <img src="' + imageArraySrc[i] + '" />');
                });

                $('div#example1').html(text);
            });
        });
    </script>
</head>
<body>
    <div id="example1">
        one there two are is an image in this text . one two three.
    </div>
    <input type="button" id="btnImage" value="Click Me!" />
</body>
</html>
于 2012-05-08T08:22:53.620 回答