Question

我试图通过在其键上使用随机选择来获取对象的值。

这与元素上的click事件相关联，在本例中为特定div <div id="magnifying-glass">。调用此方法时，我更改容器元素（<p id="outputArea"></p>）的HTML以使更改对用户可见。

当我点击该元素时，我收到此消息：

"Drew a [object Object]continent."

＆＃13;

    $(function() {
   var continents = [{
     id: "europe",
     continent: "Europe",
     message: "Europe It Is!"
   }, {
     id: "asia",
     continent: "Asia",
     message: "Let's Checkout Asia!"
   }, {
     id: "northamerica",
     continent: "North America",
     message: "North America Eh?"
   }, {
     id: "southamerica",
     continent: "South America",
     message: "South America Here We Come!"
   }, {
     id: "australia",
     continent: "Australia",
     message: "We Are Going Australia Mate!"
   }, {
     id: "africa",
     continent: "Africa",
     message: "Time To Go On African Safari!"
   }, {
     id: "antarctica",
     continent: "Antarctica",
     message: "Brrr.. Its Going To Be Cold In Antarctica"
   }];

   $(".notable").css("position", "relative");
   $(".note").hide(); 
   $(".note").each(function() {
     var pos = -$(this).fadeOut() + 'px';
     $(this).css({
       position: 'absolute',
       right: 90,
       bottom: pos
     });
   });

   $(".notable").hover(function() {
     $(this).children(".note").show();
   }, function() {
     $(".note").hide();
   });

   $("#magnifying-glass").click(drawcontinent.bind(this, continents));
 });

 function drawcontinent(randompick) {
   var chosen = Math.floor(Math.random() * 7);
   let continentObject = randompick[chosen];
   $("#outputArea").html("The Continent is " + continentObject.continent +     ".<br />" + continentObject.message + "<br/>Redirecting to continent page...");
   setTimeout(function() {
     var link = $("a[data-continent=" + continentObject.id + "]");
     link.click();
     //alert("Clicked link " + link.text()); // Comment this line and uncomment line above to go to specific page.
   }, 200 );
 }

＆＃13;

<!doctype html>
<html>

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
  <script src="marblejar.js">
  </script>
    <link rel="stylesheet" href="main.css" type="text/css" />

  <title>Learn About THe World</title>
</head>

<body>

<ul class="continentpick">
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn"><strong>Choose Continent Here</strong></a>
    <div class="dropdown-content">
      <a data-continent="northamerica" href="northamerica.html">North America</a>
      <a data-continent="southamerica" href="southamerica.html">South America</a>
      <a data-continent="europe" href="europe.html">Europe</a>
      <a data-continent="asia" href="asia.html">Asia</a>
      <a data-continent="africa" href="africa.html">Africa</a>
      <a data-continent="australia" href="australia.html">Australia</a>
      <a data-continent="antarctica" ref="antarctica.html">Antarctica</a>


    </div>
  </li>
</ul>

<div class="cornerobj">
    <h4><span class="notable">Feeling Lucky? <span class="note">Click magnifying glass to randomly choose continent</span></span> </h4>
    <div id="magnifying-glass">  
    </div>
    <br>
    <strong><p id="outputArea"></p></strong>
</div>

<div class="footerholder">   
    <div class="footer">
    <ul class="bottomlinks">
        <li><b href="#home">Home</b></li>
        <li><b href="#news">News</b></li>
        <li><b href="#contact">Contact</b></li>
        <li><b href="#about">About</b></li>
    </ul>
    </div> 
</div>

</body>

</html>

＆＃13;

Answer 1

您需要修复drawcontinent方法。

首先，您选择的随机数始终为零（您在0到1之间的十进制数字上调用Math.floor()，类似于此0.5412）。

这是因为Math.random() method返回0到1之间的数字（不包括1）（十进制数）。要获取某个范围之间的数字，您需要将.random()的结果与该独占数字相乘。

你有七大洲，所以你需要乘以7（你会得到0到6之间的数字，如果你枚举它们就是你的对象的密钥）。

最后，我不明白为什么你有一个带有大陆名称的对象和一个始终为1的数字值。在drawcontinent中你减去该值。请考虑重构，可能会将您的对象更改为此类，因为您根据0到6之间的随机数进行选择：

 randompick = {
   "0": "europe",
   "1": "asia",
   "2": "northamerica",
   "3": "southamerica",
   "4": "australia",
   "5": "africa",
   "6": "antarctica",
 }

另外，请将其从全局范围中删除，将其隐藏起来，将其隐藏在全球范围内。

无论如何，根据当前代码，为了根据密钥索引选择大陆名称，您需要使用Object.keys() method。此方法将枚举对象中的所有键并为您返回一个数组，并以字符串格式包含它们。

您可以使用以下代码选择密钥：

Object.keys(randompick)[chosen]

通过将对象传递给.keys()方法获取数组中的所有键，然后使用chosen随机数变量通过索引获取键。

drawcontinent应该是这样的：

 drawcontinent = function() {
   var chosen = Math.floor(Math.random() * 7);
   console.log(chosen)
   if (chosen < this.europe) {
     this.europe--;
     return "Europe It Is!";
   }
   if (chosen < this.asia) {
     this.asia--;
     return "Let's Checkout Asia!";
   }
   if (chosen < this.northamerica) {
     this.northamerica--;
     return "North America Eh?";
   }
   if (chosen < this.southamerica) {
     this.southamerica--;
     return "South America Here We Come!";
   }
   if (chosen < this.australia) {
     this.australia--;
     return "You've got Australia Mate!";
   }
   if (chosen < this.africa) {
     this.africa--;
     return "Time To Go On African Safari!";
   }
   if (chosen < this.antarctica) {
     this.antarctica--;
     return "Brrr.. Its Going To Be Cold In Antarctica";
   }

   $(function() {
     $("#outputArea").html("Drew a " + Object.keys(randompick)[chosen] + " continent.")
   });

 }

请检查此fiddle。

<强>更新

Here是一些重构，为了使代码更简单，请在此基础上进行重构。

在jquery中获取对象值的问题

1 个答案: