Question

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

我无法将图像属性width，height和alt添加到img scr中。目前，当您查看最终结果时，会显示：<img class="picture" src="http://i.imgur.com/tL6nW.gif" imageposition="1">

它目前缺少宽度，高度和高度。在我的HTML内容中，我已经包含了宽度，高度和alt，但是javascript似乎并没有将这些属性添加到最终结果中。任何人都可以帮我修改我的代码吗？

＆＃13;

/* 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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

为此，您必须实际将var photoToEdit = $('.photo_container img'); $( photoToEdit ).cropper({ autoCrop : true, crop: function(e) {} }); $("#rotate_left_btn").click( function () { $( photoToEdit ).cropper('rotate', -90); var containerHeightFactor = $(".photo_container").height() / $( photoToEdit).cropper('getCanvasData').height; if ( containerHeightFactor < 1 ) { // if canvas height is greater than the photo container height, then scale (on both x and y // axes to maintain aspect ratio) to make canvas height fit container height $( photoToEdit).cropper('scale', containerHeightFactor, containerHeightFactor); } else if ( $( photoToEdit).cropper('getData').scaleX != 1 || $( photoToEdit).cropper('getData').scaleY != 1 ) { // if canvas height // is NOT greater than container height but image is already scaled, then revert the scaling cuz the current rotation will bring // the image back to its original orientation (landscape/portrait) $( photoToEdit).cropper('scale', 1, 1); } }标记中的<img>标记中的属性值插入您正在交换的<img source>标记中。例如，在init上，您想要更改代码来执行此操作：

<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') });函数初始化属性。您必须对Prev / Next按钮的点击事件进行类似的调整，并更改选择值分配以查看图像对象的源属性，例如， attr

对于下拉列表，您希望将这些属性复制到要复制的每个属性的自定义select.val(nextUp.attr('source'))属性中（即数据宽度，数据高度，数据alt），以后可以访问： / p>

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

以下更新的代码：

  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;
}

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

1 个答案: