尝试将缺少的 img 属性添加到自定义 javascript

Question

我有一个 javascript，当您单击它时会更改图像 scr，它会循环显示。它还具有导航链接和箭头键盘导航。

我在向 img scr 添加图像属性宽度、高度和 alt 时遇到问题。目前，当您查看最终结果时，它显示：<img class="picture" src="http://i.imgur.com/tL6nW.gif" imageposition="1">

目前缺少宽度、高度和 alt。在我的 HTML 内容中，我已经包含了宽度、高度和 alt，但 javascript 似乎没有将这些属性添加到最终结果中。谁能帮我修复我的代码？

/* set first image in frame from #shoebox on document.ready */
$(function() {
  var leadOff = $('#shoebox img:first-child').attr('source');

  $('.picture').attr({
    'src': leadOff,
    'imageposition': '1'
  });

  var select = $('#select-jump-to');
  $.each($('#shoebox img'), function(idx, img) {
    select.append('<option value="' + img.getAttribute('source') + '">Image ' + (idx + 1) + '</option>')
  });

  select.on('change', function(e) {
    $('.picture').attr({
      'src': e.target.options[e.target.selectedIndex].value,
      'imageposition': e.target.selectedIndex + 1
    });
  });

});
/* load next image from #shoebox (click on image and/or next button) */
$('#pictureframe, #buttonright').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var plusOne = parseInt(imagePosition) + 1;
  var nextUp = $('#shoebox img:nth-child(' + plusOne + ')').attr('source');
  var select = $('#select-jump-to');
  if (imagePosition == imageTally) {
    var leadOff = $('#shoebox img:first-child').attr('source');
    $('.picture').attr({
      'src': leadOff,
      'imageposition': '1'
    });
    select.val(leadOff); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp,
      'imageposition': plusOne
    });
    select.val(nextUp);//update the dropdown as well.
  }
});

/* load previous image from #shoebox (click on prev button) */
$('#buttonleft').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var minusOne = parseInt(imagePosition) - 1;
  var nextUp = $('#shoebox img:nth-child(' + minusOne + ')').attr('source');
  var select = $('#select-jump-to');
  if (imagePosition == '1') {
    var lastPic = $('#shoebox img:last-child').attr('source');
    $('.picture').attr({
      'src': lastPic,
      'imageposition': imageTally
    });
    select.val(lastPic); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp,
      'imageposition': minusOne
    });
    select.val(nextUp); //update the dropdown as well.
  }
});

/* Add arrow keyboard navigation */
function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("right", function() {
  document.getElementById('buttonright').click();
});

function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("left", function() {
  document.getElementById('buttonleft').click();
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
#wall {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background-color: hsla(0, 0%, 20%, 1);
}
#pictureframe {
  display: flex;
  padding: 6px;
  background-color: hsla(0, 0%, 40%, 1);
}
#pictureframe img {
  display: flex;
  width: 100px;
  height: 100px;
}
#buttonswrapper {
  display: flex;
  flex-grow: 1;
}
#jumpto {
  display: flex;
  justify-content: center;
  align-items: center;
}
#buttonleft,
#buttonright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 6px;
  color: hsla(40, 20%, 70%, 1);
  font-variant: small-caps;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  background-color: hsla(0, 0%, 40%, 1);
  cursor: pointer;
}
#buttonleft:hover,
#buttonright:hover {
  background-color: hsla(50, 50%, 40%, 1);
}
#shoebox {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>
<div id="wall">
  <div id="pictureframe">
    <img class="picture" src="">
  </div>
  <div id="buttonswrapper">
    <div id="buttonleft">prev</div>
    <div id="buttonright">next</div>
  </div>
  <div id="jumpto">
    <select id="select-jump-to"></select>
  </div>
</div>
<div id="shoebox">
  <!-- prevent loading all images by changing src to source -->
  <img source="http://i.imgur.com/tL6nW.gif" width="100" height="100" alt="pic1">
  <img source="http://i.imgur.com/BfZ5f.gif" width="100" height="100" alt="pic2">
  <img source="http://i.imgur.com/mR7wo.gif" width="100" height="100" alt="pic3">
</div>

Answer 1

为此，您必须将您从<img source> 标记中提取的<img> 标记中的属性值实际插入到您要交换的<img> 标记中。例如，在初始化时，您想要更改您的代码以执行此操作：

  var leadOff = $('#shoebox img:first-child');

  $('.picture').attr({
    'src': leadOff.attr('source'),
    'imageposition': '1',
    'width': leadOff.attr('width'),
    'height': leadOff.attr('height'),
    'alt': leadOff.attr('alt')
  });

请注意，您选择的是图像标签本身，而不是直接选择来源。然后，您通过attr 函数通过读取标签中的属性来初始化属性。您必须对 Prev/Next 按钮的单击事件进行类似调整，并更改选择值分配以查看图像对象的源属性，例如select.val(nextUp.attr('source'))

对于下拉列表，您希望将这些属性复制到您想要复制的每个属性（即数据宽度、数据高度、数据替代）的自定义 data- 属性中，以便稍后访问：

  $.each($('#shoebox img'), function(idx, img) {
    select.append('<option value="' + 
    img.getAttribute('source') + 
      '" data-width="' +  img.getAttribute('width') + 
      '" data-height="' + img.getAttribute('height') + 
      '" data-alt="' + img.getAttribute('alt') + 
      '">Image ' + (idx + 1) + '</option>'
    )
  });

在change事件中，只需读取option标签的属性并设置在图片中即可：

  select.on('change', function(e) {
    var option = e.target.options[e.target.selectedIndex];
    $('.picture').attr({
      'src': option.value,
      'imageposition': e.target.selectedIndex + 1,
      'width': option.getAttribute('data-width'),
      'height': option.getAttribute('data-height'),
      'alt': option.getAttribute('data-alt')
    });
  });

以下更新代码：

/* set first image in frame from #shoebox on document.ready */
$(function() {
  var leadOff = $('#shoebox img:first-child');

  $('.picture').attr({
    'src': leadOff.attr('source'),
    'imageposition': '1',
    'width': leadOff.attr('width'),
    'height': leadOff.attr('height'),
    'alt': leadOff.attr('alt')
  });

  var select = $('#select-jump-to');
  $.each($('#shoebox img'), function(idx, img) {
    select.append('<option value="' + 
    img.getAttribute('source') + 
      '" data-width="' +  img.getAttribute('width') + 
      '" data-height="' + img.getAttribute('height') + 
      '" data-alt="' + img.getAttribute('alt') + 
      '">Image ' + (idx + 1) + '</option>'
    )
  });

  select.on('change', function(e) {
    var option = e.target.options[e.target.selectedIndex];
    $('.picture').attr({
      'src': option.value,
      'imageposition': e.target.selectedIndex + 1,
      'width': option.getAttribute('data-width'),
      'height': option.getAttribute('data-height'),
      'alt': option.getAttribute('data-alt')
    });
  });

});
/* load next image from #shoebox (click on image and/or next button) */
$('#pictureframe, #buttonright').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var plusOne = parseInt(imagePosition) + 1;
  var nextUp = $('#shoebox img:nth-child(' + plusOne + ')');
  var select = $('#select-jump-to');
  if (imagePosition == imageTally) {
    var leadOff = $('#shoebox img:first-child');
    $('.picture').attr({
      'src': leadOff.attr('source'),
      'imageposition': '1',
      'width': leadOff.attr('width'),
      'height': leadOff.attr('height'),
      'alt': leadOff.attr('alt')
    });
    select.val(leadOff.attr('source')); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp.attr('source'),
      'imageposition': plusOne,
      'width': nextUp.attr('width'),
      'height': nextUp.attr('height'),
      'alt': nextUp.attr('alt')
    });
    select.val(nextUp.attr('source')); //update the dropdown as well.
  }
});

/* load previous image from #shoebox (click on prev button) */
$('#buttonleft').click(function() {
  var imageTally = $('#shoebox img').length;
  var imagePosition = $('.picture').attr('imageposition');
  var minusOne = parseInt(imagePosition) - 1;
  var nextUp = $('#shoebox img:nth-child(' + minusOne + ')');
  var select = $('#select-jump-to');
  if (imagePosition == '1') {
    var lastPic = $('#shoebox img:last-child');
    $('.picture').attr({
      'src': lastPic.attr('source'),
      'imageposition': imageTally,
      'width': lastPic.attr('width'),
      'height': lastPic.attr('height'),
      'alt': lastPic.attr('alt')
    });
    select.val(lastPic.attr('source')); //update the dropdown as well.
  } else {
    $('.picture').attr({
      'src': nextUp.attr('source'),
      'imageposition': minusOne,
      'width': nextUp.attr('width'),
      'height': nextUp.attr('height'),
      'alt': nextUp.attr('alt')
    });
    select.val(nextUp.attr('source')); //update the dropdown as well.
  }
});

/* Add arrow keyboard navigation */
function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("right", function() {
  document.getElementById('buttonright').click();
});

function GoToLocation(url) {
  window.location = url;
}
Mousetrap.bind("left", function() {
  document.getElementById('buttonleft').click();
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
#wall {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background-color: hsla(0, 0%, 20%, 1);
}
#pictureframe {
  display: flex;
  padding: 6px;
  background-color: hsla(0, 0%, 40%, 1);
}
#pictureframe img {
  display: flex;
  width: 100px;
  height: 100px;
}
#buttonswrapper {
  display: flex;
  flex-grow: 1;
}
#jumpto {
  display: flex;
  justify-content: center;
  align-items: center;
}
#buttonleft,
#buttonright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 6px;
  color: hsla(40, 20%, 70%, 1);
  font-variant: small-caps;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  background-color: hsla(0, 0%, 40%, 1);
  cursor: pointer;
}
#buttonleft:hover,
#buttonright:hover {
  background-color: hsla(50, 50%, 40%, 1);
}
#shoebox {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script>
<div id="wall">
  <div id="pictureframe">
    <img class="picture" src="">
  </div>
  <div id="buttonswrapper">
    <div id="buttonleft">prev</div>
    <div id="buttonright">next</div>
  </div>
  <div id="jumpto">
    <select id="select-jump-to"></select>
  </div>
</div>
<div id="shoebox">
  <!-- prevent loading all images by changing src to source -->
  <img source="http://i.imgur.com/tL6nW.gif" width="100" height="100" alt="pic1">
  <img source="http://i.imgur.com/BfZ5f.gif" width="100" height="100" alt="pic2">
  <img source="http://i.imgur.com/mR7wo.gif" width="100" height="100" alt="pic3">
</div>