0

jQueryでテキストを使用してこれを実行しようとしています:

例

私は配列を持っていて、そこから画像を x 単語ごとに balise p に追加する必要があります。(x は乱数です)。

jQuery を使用すると、単語を簡単に数えることができます。

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

テキストに画像をランダムに追加するにはどうすればよいですか?

4

3 に答える 3

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 に答える
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 に答える
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 に答える