Question

我遇到的问题是只有一个图像（最后一个）被添加到div中。

HTML：

<div id="matte_designs_strip_wrapper"></div>

使用Javascript：

matte_design_change_design_type();
function matte_design_change_design_type()
{
  var 
    count_matte_designs = 0,
    thumb_img,
    mattes_selected_type = 182;


  $(function()  //jquery .ready()
  {
    xml = get_xml();

        var output = [];
        $('component', xml).each(function(i, el) // jshint ignore:line 
        {
          count_matte_designs++;
          var thumb = $("thumb", this).text(),
              cid = $("cid", this).first().text(),
              name = $("name", this).first().text().replace("Collage - ", ""),
              alt = (name + "_" + cid),
              description = $("description", this).first().text();


          //https://bugs.chromium.org/p/chromium/issues/detail?id=7731, see comment 12
          thumb_img = new Image();
          thumb_img.id = 'cid_' + cid;
          thumb_img.alt = alt;
          thumb_img.src = ""; 
          thumb_img.addEventListener('load', function() {
            $('#cid_' + cid).replaceWith(thumb_img);

            //code
          }, false);
          thumb_img.addEventListener('click', function() {
            //code
          }, false);
          thumb_img.src = 'https://tecws.com/system/components/compimg/' + thumb + '/flashthumb';

          output.push('<span class="matte_design_image_name"><img id="cid_' + cid + '" /><br /><span class="matte_design_name" id="matte_design_name_' + mattes_selected_type + '_' + i + '">' + name + '</span></span>'); 

          $('#matte_designs_strip_wrapper').html(output.join('')); 

        }); 

        if (count_matte_designs > 0)
        {
            //code
        }
        else
        {
          $('#matte_designs_strip_wrapper').html("<p>Sorry, but there are no mattes of this type available.</p>");
        }
        //code




  });
}


function get_xml()
{
  return '<?xml version="1.0"?><components><component><cid>1721</cid><sku></sku><name>Single Opening - 4x6</name><description></description><description_list>0</description_list><pattern></pattern><thumb>168c619a1d1743bd4f3aba9d69a8c3ce</thumb><highres></highres><cpu>0.00</cpu><width>10</width><height>12</height><Order><size width="9.5" height="11.5"/><type>photo</type><Openings><opening><item><x>3</x><y>3</y><width>3.5</width><height>5.5</height><type>rectangle</type></item></opening></Openings><Mats><mat><item size="0"><imgsrc>[DEFAULT_MATTE_IMGSRC]</imgsrc><size>0</size><cid>[DEFAULT_MATTE_CID]</cid> </item></mat><mat><item size=".5"><imgsrc>[DEFAULT_MATTE1_IMGSRC]</imgsrc><size>0.5</size><cid>[DEFAULT_MATTE1_CID]</cid></item></mat><mat><item size=".5"><imgsrc>[DEFAULT_MATTE2_IMGSRC]</imgsrc><size>0.5</size><cid>[DEFAULT_MATTE2_CID]</cid></item></mat></Mats></Order></component><component>    <cid>1722</cid>    <sku></sku>    <name>Single Opening - 5"x7"</name>    <description></description>    <description_list>0</description_list>    <pattern></pattern>    <thumb>1dbc4769d6764631f02d14c867f1347d</thumb>    <highres></highres>    <cpu>0.00</cpu>    <width>11</width>    <height>13</height>    <Order>  <size width="10.5" height="12.5"/>  <type>photo</type>  <Openings>    <opening>        <item>            <x>3</x>            <y>3</y>            <width>4.5</width>            <height>6.5</height>            <type>rectangle</type>        </item>    </opening>     </Openings><Mats> <mat>       <item size="0">         <imgsrc>[DEFAULT_MATTE_IMGSRC]</imgsrc>         <size>0</size>                        <cid>[DEFAULT_MATTE_CID]</cid>                                 </item>    </mat>  <mat>       <item size="0.5">           <imgsrc>[DEFAULT_MATTE1_IMGSRC]</imgsrc>            <size>0.5</size>                        <cid>[DEFAULT_MATTE1_CID]</cid>                              </item>    </mat>  <mat>       <item size="0.5">           <imgsrc>[DEFAULT_MATTE2_IMGSRC]</imgsrc>            <size>0.5</size>                        <cid>[DEFAULT_MATTE2_CID]</cid>                              </item>    </mat></Mats></Order>  </component>  <component>    <cid>1723</cid>    <sku></sku>    <name>Single Opening - 8"x10"</name>    <description></description>    <description_list>0</description_list>    <pattern></pattern>    <thumb>4e72f7f4b3bb7ae271773eab634c2f11</thumb>    <highres></highres>    <cpu>0.00</cpu>    <width>14</width>    <height>16</height>    <Order>  <size width="13.5" height="15.5"/>  <type>photo</type>  <Openings>    <opening>        <item>            <x>3</x>            <y>3</y>            <width>7.5</width>            <height>9.5</height>            <type>rectangle</type>        </item>    </opening>      </Openings><Mats>   <mat>       <item size="0">         <imgsrc>[DEFAULT_MATTE_IMGSRC]</imgsrc>         <size>0</size>                        <cid>[DEFAULT_MATTE_CID]</cid>                                 </item>    </mat>  <mat>       <item size="0.5">           <imgsrc>[DEFAULT_MATTE1_IMGSRC]</imgsrc>            <size>0.5</size>                        <cid>[DEFAULT_MATTE1_CID]</cid>                              </item>    </mat>  <mat>       <item size="0.5">           <imgsrc>[DEFAULT_MATTE2_IMGSRC]</imgsrc>            <size>0.5</size>&gt;                        <cid>[DEFAULT_MATTE2_CID]</cid>                              </item>    </mat></Mats></Order>  </component></components>';
}

结果HTML：

<div id="matte_designs_strip_wrapper">
  <span class="matte_design_image_name">
    <img id="cid_1723" alt="Single Opening - 8&quot;x10&quot;_1723" src="https://tecws.com/system/components/compimg/4e72f7f4b3bb7ae271773eab634c2f11/flashthumb">
    <br>
    <span class="matte_design_name" id="matte_design_name_182_0">Single Opening - 4x6</span>
  </span>
  <span class="matte_design_image_name"><br>
    <span class="matte_design_name" id="matte_design_name_182_1">Single Opening - 5"x7"</span>
  </span>
  <span class="matte_design_image_name">
    <br><span class="matte_design_name" id="matte_design_name_182_2">Single Opening - 8"x10"</span>
  </span>
</div>

JSFiddle

Answer 1

为什么在循环中使用.html而不是在循环结束时？通过使用：$('#cid_' + cid).replaceWith(thumb_img);，您正在操作尚未创建的元素

而不是使用thumb_img = new Image();尝试将src，alt等等直接放在输出中，你不能这样做

为什么只有一个图像显示，当3个应该加载？

1 个答案: