Question

我的Yii2框架生成的代码给了我标签内的文本，该文本是图像url。我尝试使用jquery和append将文本转换为图像，但我的Yii2生成的代码无法正常工作

<div id="gallery-gallery_id">
<label><input name="Gallery[gallery_id][]" value="176" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png</label>
<label><input name="Gallery[gallery_id][]" value="177" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png</label>
<label><input name="Gallery[gallery_id][]" value="180" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg</label>
<label><input name="Gallery[gallery_id][]" value="178" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png</label>
<label><input name="Gallery[gallery_id][]" value="179" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png</label>
<label><input name="Gallery[gallery_id][]" value="181" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg</label>
<label><input name="Gallery[gallery_id][]" value="182" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg</label>
<label><input name="Gallery[gallery_id][]" value="183" type="checkbox"> u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg</label>
</div>

我做了

<?php foreach ($model->galleries as $image) {?>
    <script type="text/javascript">
    $('#gallery-gallery_id label').append('<img src="<?= $image->gallery_lgimage)?>" height="100" width="100">');
</script>
<?php }?>

但是我为每个标签获得了所有图像，我正在尝试为每个标签获得一个图像

我得到的结果

<div id="gallery-gallery_id">
<label><input name="Gallery[gallery_id][]" value="176" type="checkbox"> 176<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="177" type="checkbox"> 177<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="178" type="checkbox"> 178<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="179" type="checkbox"> 179<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="180" type="checkbox"> 180<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="181" type="checkbox"> 181<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="182" type="checkbox"> 182<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
<label><input name="Gallery[gallery_id][]" value="183" type="checkbox"> 183<img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/114400179a0768d203377245b8654714fe9bb65.1png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/21440017a0fb0bd39d7388fefaae540cb069483.2png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/3144001878d1205735991133700565964c026bd.3png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430400/414400133d68969a6162ea0290cfbb80817852f.4png" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/114421754b47aa61094f6765a7ff76f3f1296cc.1jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/314421752c0c9d277bf133a6ca82992742c080d.3jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/5144217e177430e5b8a11b224bba3470681f34b.5jpg" width="100" height="100"><img src="u-fls/MjQoDMoZ00oNQ742Oa2262018/uQzxuXmLWHQSs3754As/gal//1534430537/7144217b578dfce326513fc927499138447916d.7jpg" width="100" height="100"></label>
</div>

Answer 1

一次只选择一个标签即可将您的图像附加到该标签上。

$( "#yourInputTextId" ).keydown(function(evt) {
   if(evt.key === "Tab")
      //call your function
});

Answer 2

似乎您要将每个<image>附加到每个<label>。 $('#gallery-gallery_id label')与<label>内部的所有#gallery-gallery_id元素匹配。

据我了解，您想将每个<label>中的文本URL转换为<image>>内的<label元素。

在下面的方法中，我遍历每个<label>，将其文本url转换为图像元素，并将该<image>附加到<label>。我依靠jQuery的text() method剥离HTML并仅返回文本url。

尽管，正如我在上面的评论中提到的那样，使用PHP随心所欲地写HTML可能比使用JavaScript稍后对其进行操作更为简单。

jQuery('#gallery-gallery_id label').each(function() {
  var $this = $(this);
  var $input = $this.find('input');
  var url = $this.text();
  var $img = jQuery('<img>', {
    'src': url
  });
  $this.html($input).append($img);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery-gallery_id">
  <label><input name="Gallery[gallery_id][]" value="176" type="checkbox"> https://loremflickr.com/20/20?random=1</label>
  <label><input name="Gallery[gallery_id][]" value="177" type="checkbox"> https://loremflickr.com/20/20?random=2</label>
  <label><input name="Gallery[gallery_id][]" value="180" type="checkbox"> https://loremflickr.com/20/20?random=3</label>
  <label><input name="Gallery[gallery_id][]" value="178" type="checkbox"> https://loremflickr.com/20/20?random=4</label>
  <label><input name="Gallery[gallery_id][]" value="179" type="checkbox"> https://loremflickr.com/20/20?random=5</label>
  <label><input name="Gallery[gallery_id][]" value="181" type="checkbox"> https://loremflickr.com/20/20?random=6</label>
  <label><input name="Gallery[gallery_id][]" value="182" type="checkbox"> https://loremflickr.com/20/20?random=7</label>
  <label><input name="Gallery[gallery_id][]" value="183" type="checkbox"> https://loremflickr.com/20/20?random=8</label>
</div>

jQuery将文本转换为图像

2 个答案: