javascript - 将选择下拉框添加到onclick交换图像js

Question

我有一个 javascript，当您单击图像时它会更改图像 scr，它会循环显示。它还具有带箭头键盘导航的分页链接。我想要做的是添加一个选择下拉列表框，允许我跳转到我想要的任何图像。我怎样才能做到这一点？我只想要一个没有提交按钮的选择下拉列表

/* 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'});
});
/* 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');
  if (imagePosition == imageTally) {
    var leadOff = $('#shoebox img:first-child').attr('source');
    $('.picture').attr({'src' : leadOff, 'imageposition' : '1'});
  } else {
    $('.picture').attr({'src' : nextUp, 'imageposition' : plusOne});
  }
});
/* 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');
  if (imagePosition == '1') {
    var lastPic = $('#shoebox img:last-child').attr('source');
    $('.picture').attr({'src' : lastPic, 'imageposition' : imageTally});
  } else {
    $('.picture').attr({'src' : nextUp, 'imageposition' : minusOne});
  }
});

/* 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;
}
#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>
<div id="shoebox">
  <!-- prevent loading all images by changing src to source -->
  <img source="http://i.imgur.com/tL6nW.gif">
  <img source="http://i.imgur.com/BfZ5f.gif">
  <img source="http://i.imgur.com/mR7wo.gif">  
</div>

Answer 1

我会从一个空的下拉列表开始，该下拉列表会自动使用您列表中的图像源作为选项值填充自身，然后让下拉列表的 changed 事件根据选定的选项。这是我根据您的设置得出的结论:

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

如果您希望 Prex/Next 按钮也更改下拉菜单，请将下拉菜单的值设置为等于您在事件中设置的 imageURL，例如$('#select-jump-to').val(variableContainingnextImage)

这是您的代码，其中包含下拉菜单和更改下拉菜单的按钮。

/* 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">
  <img source="http://i.imgur.com/BfZ5f.gif">
  <img source="http://i.imgur.com/mR7wo.gif">
</div>