Question

我试图了解如何使用javascript处理某些事件，特别是如果触发了特定事件，则当前函数调用另一个函数。在onLoad上，javascript创建第一个从第一个对象中选择数据。然后，如果我选择有价值的语音＆＃34; Iphone＆＃34;被称为另一个功能，用于创建具有一些价格的第二个菜单。我的主要问题是我的解决方案似乎非常难看，而且当我在按钮上单击多次时，它每次都会创建相同的第二个选择。

＆＃13;

69720375229712477164533808935312303556800

＆＃13;

//global objects
var product = [
  {name: "Samsung"},
  {name: "Iphone"},
  {name: "Alcatel"},
  {name: "Sony"}
]

var productPrice = [
  {name: "Samsung", price: 190},
  {name: "Iphone", price: 290},
  {name: "Alcatel", price: 65},
  {name: "Sony", price: 330}
]

var main = function() {
  var sel = $('<select>').appendTo('#select-1');
  
  $(product).each(function() {
    sel.append($("<option>").attr('value', this.name).text(this.name));
  });
  
  $('.press').click(function() {
    if ($("#select-1 option:selected").text() == "Iphone") {
      handleEvent();
    }
    
    if ($("#select-1 option:selected").text() != "Iphone") {
      $("#risposta").remove();
    }
  });
}

function handleEvent() {
  var sel = $('<select>').appendTo('#select-2');
  
  $(productPrice).each(function() {
    sel.append($("<option>").attr('value', this.name).text(this.price));
  });
}

$(document).ready(function() {
  main();
});

＆＃13;

fiddle

有什么建议吗？

Answer 1

我的问题并非100％明确，但我知道您希望在select准备好的事件中生成dom代码。当您选择iPhone选项并点击Click按钮时，您希望使用变量中的新选项生成另一个select标记。

第一个选项

我在下面提供了什么。它基本上是你的代码，但有一个额外的if语句

jsFiddle链接：https://jsfiddle.net/qu9zs2h1/2/

的Javascript

//global objects
var product = [{
  name: "Samsung"
}, {
  name: "Iphone"
}, {
  name: "Alcatel"
}, {
  name: "Sony"
}]

var productPrice = [{
  name: "Samsung",
  price: 190
}, {
  name: "Iphone",
  price: 290
}, {
  name: "Alcatel",
  price: 65
}, {
  name: "Sony",
  price: 330
}]

var main = function() {
  var sel = $('<select>').appendTo('#select-1');

  $(product).each(function() {
    sel.append($("<option>").attr('value', this.name).text(this.name));
  });

  $('.press').click(function() {
    if ($("#select-1 option:selected").text() == "Iphone") {
      handleEvent();
    }

    if ($("#select-1 option:selected").text() != "Iphone") {
      $("#risposta").remove();
    }
  });
}

function handleEvent() {
  // We still run the handleEvent function however, if check to see
  // if the second select option has been generated by checking a 
  // class
  if (!$('.prices').length) {
    var sel = $('<select class="prices">').appendTo('#select-2');
    $(productPrice).each(function() {
      sel.append($("<option>").attr('value', this.name).text(this.price));
    });
  }
}

$(document).ready(function() {
  main();
});

HTML

<div id="select-1">
</div>
<div id="select-2">
</div>
<button class="press">Click</button>

我必须将类prices添加到您的第二个select，但这只是一个可以重命名的类，用于查看该元素是否已存在。

第二种选择（可能是更好的方式）

您是否已准备好dom上的所有内容，并在开始时隐藏您想要的内容，然后根据需要隐藏show元素，就像这样

jsFiddle：https://jsfiddle.net/qu9zs2h1/5/

的Javascript

//global objects
var product = [{
  name: "Samsung"
}, {
  name: "Iphone"
}, {
  name: "Alcatel"
}, {
  name: "Sony"
}]

var productPrice = [{
  name: "Samsung",
  price: 190
}, {
  name: "Iphone",
  price: 290
}, {
  name: "Alcatel",
  price: 65
}, {
  name: "Sony",
  price: 330
}]

// On document ready run this script
$(function() {
    $('.jshidden').removeClass('jshidden').hide();

  var $select1 = $('#select-1');
  var $select2 = $('#select-2');
  var $sel1 = $('<select>').appendTo($select1);
  var $sel2 = $('<select>').appendTo($select2);

  $(product).each(function() {
    $sel1.append($("<option>").attr('value', this.name).text(this.name));
  });

  $(productPrice).each(function() {
    $sel2.append($("<option>").attr('value', this.price).text(this.price));
  });

  $('.press').click(function() {
    if ($select1.find(":selected").text() == "Iphone") {
      $select2.show();
    }

    if ($select1.find(":selected").text() != "Iphone") {
      $select2.hide();
    }
  });
});

HTML

<div id="select-1">
</div>
<div id="select-2" class="jshidden">
</div>
<button class="press">Click</button>

P.S。只是一些东西，任何指向jQuery元素变量的东西应该以{{1}}开头，它只是帮助阅读代码。

只需快速更新，您还可以使用此代码缩小$代码

.press

$('.press').click(function() { var iPhoneCheck = $select1.find(":selected").text() == "Iphone"; $select2.toggle(iPhoneCheck); });接收bool值以显示目标或隐藏目标

Answer 2

//global objects
var product = [
  {name: "Samsung"},
  {name: "Iphone"},
  {name: "Alcatel"},
  {name: "Sony"}
];

var productPrice = [
  {name: "Samsung", price: 190},
  {name: "Iphone", price: 290},
  {name: "Alcatel", price: 65},
  {name: "Sony", price: 330}
];

var main = function() {
  var sel = $('<select>').appendTo('#select-1');
  $(product).each(function() {
    sel.append($("<option>").attr('value', this.name).text(this.name));
  });
  
  $('.press').click(function() {
    var sel2 = document.getElementById('select-2');
    var selectedOption = $("#select-1 option:selected").text();
    if (selectedOption == "Iphone") {
      // check if the select was already added
      if(sel2.children.length == 0)
        handleEvent();
    }
    else {
      // I think here you wanted to remove the second select that was added for iphone option
      sel2.innerHTML = '';
    }
  });
}

function handleEvent() {
  var sel = $('<select>').appendTo('#select-2');
  $(productPrice).each(function() {
    sel.append($("<option>").attr('value', this.name).text(this.price));
  });
}

// if you already have a declared function, there is no need to an anonymous function
// just call the main function directly
$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="select-1">
</div>
<div id="select-2">
</div>
<button class="press">Click</button>

如何使用javascript正确处理函数中的调用函数

2 个答案:

第一个选项

第二种选择（可能是更好的方式）