提取函数值（javascript）

Question

单击按钮后，我想在“ .btn-random”中重用recipes_number1，但是我的代码无法正常工作。我检查了一下，发现recipes_number1无法带出……有人可以救我吗？ :(

var recipes_number1 ;


$('.btn-random').click(function(){
  recipes_number1 = Math.floor(Math.random() * 3);
  var photo_url = Appetizer_photos[ recipes_number1 ];
  var splitText = Appetizer[ recipes_number1 ];
  $('#random-photo').attr('src',photo_url);
  document.getElementById("list1").innerHTML= splitText; 

  ;
});

var Appertizer_slide = Appertizer_name[recipes_number1];

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName(Appertizer_slide);
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}

Answer 1

我想您是在问点击发生后如何获取Main_Dish_slide更新后的值：

var recipes_number1 ;
var Main_Dish_slide;

$('.btn-random').click(function(){
  recipes_number1 = Math.floor(Math.random() * 3);
  var photo_url = Appetizer_photos[ recipes_number1 ];
  var splitText = Appetizer[ recipes_number1 ];
  $('#random-photo').attr('src',photo_url);
  document.getElementById("list1").innerHTML= splitText; 
  Main_Dish_slide = Main_Dish_name[recipes_number1];
});



function showDivs(n) {
  var i;
  var x = document.getElementsByClassName(Main_Dish_slide);
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}

同样的概念，您需要重新分配Appertizer_slide所引用的内容-该代码与您首先提供的代码之间的主要区别是，如果您打算立即调用showDivs，则需要给Appertizer_slide一个起始值：

var recipes_number1 ;
var Appertizer_slide = Appertizer_name[Math.floor(Math.random() * 3)];

$('.btn-random').click(function(){
  recipes_number1 = Math.floor(Math.random() * 3);
  var photo_url = Appetizer_photos[ recipes_number1 ];
  var splitText = Appetizer[ recipes_number1 ];
  $('#random-photo').attr('src',photo_url);
  document.getElementById("list1").innerHTML= splitText; 
  Appertizer_slide = Appertizer_name[recipes_number1];
});



var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName(Appertizer_slide);
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}

Answer 2

尝试这个：

var recipes_number1, Main_Dish_slide;

$('.btn-random').click(function(){
  recipes_number1 = Math.floor(Math.random() * 3);
  var photo_url = Appetizer_photos[ recipes_number1 ];
  var splitText = Appetizer[ recipes_number1 ];
  $('#random-photo').attr('src',photo_url);
  document.getElementById("list1").innerHTML= splitText; 
  Main_Dish_slide = Main_Dish_name[recipes_number1];
});

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName(Main_Dish_slide);
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}