Question

次のコードを使用して、HTML要素を動的にdiv要素に追加します。 DOMにHTMLを追加した後、毎秒イメージを変更したいと思います。 しかし、私のコードは動作しません。私のミスはどこですか？

var images = ["http://pathToImg1.jpg", "http://pathToImg2.jpg"]; 

    var result = '<div class="result">'+ 
         '<a href="'+url+'" target="_blank" id="resultTitle" class="resultTitle">'+urlTitle+'</a>'+ 
         '<p id="resultDescription" style="height: 15px;">'+ 
         '<div class="resultImg" style="background-image: url('+images[0]+');"></div>'+ 
         '<span class="resultDescription" style="margin:0px 15px 0px 0;">'+description+'</span></p>'+ 
         '<p id="resultUrl" class="resultUrl">'+url+'</p>'+ 
        '</div>'; 

    $("#"+targetId).append(result); 

    var i = 0; 
    setInterval(function() { 
      var el = $(result).find(".resultImg"); 
      $(el).css('background-image', 'url("' + images[i] + '")'); 
      i = i + 1; 
      if (i == images.length) { 
      i = 0; 
      } 
    }, 1000); 

Answer 1

：result変数に含まれる文字列を選択

var el = $(result).find(".resultImg"); 

はあなたに何の影響も与えないだろう、あなたはそれはあなたが結果を取り付けるために使用する親だから要素を選択する必要があります。

この行は次のように変更する必要があります。

var el = $("#"+targetId).find(".resultImg"); 

Answer 2

$(result).find(".resultImg");は要素を返しません。 resultはクラスであるためです。あなたはそれを交換する必要があります$(".result").find(".resultImg");

以下は動作するスニペットです。

var images = ["http://images.financialexpress.com/2015/12/Lead-image.jpg", "http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg","https://static.pexels.com/photos/50704/car-race-ferrari-racing-car-pirelli-50704.jpeg"]; 
 
var targetId = "example"; 
 

 
    var result = '<div class="result">'+ 
 
         '<a href="#" target="_blank" id="resultTitle" class="resultTitle">urlTitle</a>'+ 
 
         '<div class="resultImg" style="background-image: url('+images[0]+');"></div>'+ 
 
         '<span class="resultDescription" style="margin:0px 15px 0px 0;">description</span></p>'+ 
 
        '</div>'; 
 

 
    $("#"+targetId).append(result); 
 

 
    var i = 0; 
 
    setInterval(function() { 
 
     var el = $(".result").find(".resultImg"); 
 
      $(el).css('background-image', 'url("' + images[i] + '")'); 
 
      i = i + 1; 
 
      if (i == images.length) { 
 
      i = 0; 
 
      } 
 
    }, 1000);

#example{ 
 
    width:250px; 
 
    height:200px; 
 
    border:1px solid red; 
 
} 
 
.resultImg{ 
 
    width:150px; 
 
    height:100px; 
 
    border:1px solid green; 
 
    background-position:center; 
 
    background-size:cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="example"></div>

Answer 3

問題がvar el = $(result).find(".resultImg");

resultは、文書としてのコンテキストを持っていけないと、それは私が色としてあなたのコードから画像を交換して"#"+targetIdを使用var el = $("#"+targetId).find(".resultImg");

あるべきです#testあなたの仕事を紹介するだけです

var images = ["blue", "red"]; 
 

 
    var result = '<div class="result">'+ 
 
         '<a href="" target="_blank" id="resultTitle" class="resultTitle">Result</a>'+ 
 
         '<p id="resultDescription" style="height: 15px;">'+ 
 
         '<div class="resultImg" style="background-color: '+images[1]+';">resultImg</div>'+ 
 
         '<span class="resultDescription" style="margin:0px 15px 0px 0;">description</span></p>'+ 
 
         '<p id="resultUrl" class="resultUrl">url</p>'+ 
 
        '</div>'; 
 

 
    $("#test").append(result); 
 

 
    var i = 0; 
 
    
 
    setInterval(function() { 
 
      var el = $("#test").find(".resultImg"); 
 
      el.css('background-color', images[i]); 
 
      i = i + 1; 
 
      if (i == images.length) { 
 
      i = 0; 
 
      } 
 
    }, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"></div>

Answer 4

これを試してみてください：

var images = []; 
images[0] = "url of your first image"; 
images[1] = "url of your second image"; 
images[2] = "url of your third image"; 
images[3] = "url of your fourth image"; 
images[4] = "url of your fifth image"; 
images[5] = "url of your sixth image"; 

var i = 0; 
setInterval(fadeDivs, 1000); 

function fadeDivs() { 
    i = i < images.length ? i : 0; 
    console.log(i) 
    $('.product img').fadeOut(100, function(){ 
     $(this).attr('src', images[i]).fadeIn(100); 
    }) 
    i++; 
} 

手動でフェードインとフェードアウトの時間を変更することができます。画像が変化する時間を設定します。今は1秒（1000ミリ秒）に設定しました。あなたがそこにエラー持って