时间戳

首页 > 解决方案 > 使用基于 JS if 语句的新图像更新 window.location

javascript - 使用基于 JS if 语句的新图像更新 window.location

问题描述

我正在尝试重构我已经工作的应用程序。https://besthaircolor.herokuapp.com/

应用程序：当用户选择 eyeColor 和 skinTone 时，会打开一个新的 html 结果页面 (window.location)，并向他们展示他们最好的 3 种头发颜色。

目标：目前，我有许多基于每个可能结果的 html 页面，例如。eyeColor：“Brown” skinTone：“Fair”，提交，然后 window.location 会打开一个单独的页面，其中包含 3 张最佳独特头发颜色的图像。我正在尝试找到一种方法，其中只有一个 html 结果（window.location）页面，并且从下拉选择中更新的唯一内容是照片（结果）。

我很难研究我正在尝试做的事情，因为如果不清楚 img 将在结果页面上的位置正确，则将 img src 添加到 window.location 从技术上讲是行不通的？如果让您感到困惑，我深表歉意，我仍然是初学者。如果有人能指出我正确的方向或建议任何关于我正在努力完成的教程，那将会很有帮助。

除非，我的代码与目前的方式完全一样，但从我的研究来看，重复/冗余代码永远不会好。如果有人可以请告诉我。

我的 index.js：

document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication();
  }
}

var eyeColor = null;
function selectMenu1(value){
  eyeColor = value;
}

var skinTone = null;
function selectMenu2(value){
  skinTone = value;
}



function validate()  { 
  if (eyeColor && skinTone){
          // alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
      if (eyeColor=="brown" && skinTone=="fair"){
        window.location = "brown/brown_fair.html";
      } else if (eyeColor=="brown" && skinTone=="light"){
        window.location = "brown/brown_light.html";
      } else if (eyeColor=="brown" && skinTone=="medium"){
        window.location = "brown/brown_medium.html";
      } else if (eyeColor=="brown" && skinTone=="bronze"){
        window.location = "brown/brown_bronze.html";
      } else if (eyeColor=="brown" && skinTone=="tan"){
        window.location = "brown/brown_tan.html";
      } else if (eyeColor=="brown" && skinTone=="rich"){
        window.location = "brown/brown_rich.html";
      }   

      if (eyeColor=="blue" && skinTone=="fair"){
        window.location = "blue/blue_fair.html";
      } else if (eyeColor =="blue" && skinTone=="light"){
        window.location = "blue/blue_light.html";
      } else if (eyeColor =="blue" && skinTone=="medium"){
        window.location = "blue/blue_medium.html";
      } else if (eyeColor =="blue" && skinTone=="bronze"){
        window.location = "blue/blue_bronze.html";
      } else if (eyeColor=="blue" && skinTone=="tan"){
        window.location = "blue/blue_tan.html";
      } else if (eyeColor=="blue" && skinTone=="rich"){
        window.location = "blue/blue_rich.html";
      }

      if (eyeColor=="green" && skinTone=="fair"){
        window.location = "green/green_fair.html";
      } else if (eyeColor == "green" && skinTone=="light"){
        window.location= "green/green_light.html";
      } else if (eyeColor== "green" && skinTone=="medium"){
        window.location="green/green_medium.html";
      } else if (eyeColor=="green" && skinTone=="bronze"){
        window.location="green/green_bronze.html";
      } else if (eyeColor=="green" && skinTone=="tan"){
        window.location="green/green_tan.html";
      } else if (eyeColor=="green" && skinTone=="rich"){
        window.location="green/green_rich.html";
      }


      if (eyeColor=="hazel" && skinTone=="fair"){
        window.location = "hazel/hazel_fair.html";
      } else if (eyeColor=="hazel" && skinTone=="light"){
        window.location="hazel/hazel_light.html";
      } else if (eyeColor=="hazel" && skinTone=="medium"){
        window.location="hazel/hazel_medium.html";
      } else if (eyeColor=="hazel" && skinTone=="bronze"){
        window.location="hazel/hazel_bronze.html";
      } else if (eyeColor=="hazel" && skinTone=="tan"){
        window.location="hazel/hazel_tan.html";
      } else if (eyeColor=="hazel" && skinTone=="rich"){
        window.location="hazel/hazel_rich.html";
      }
    }




//Error message if user does not select an item from the dropdown menus

if (!eyeColor){
  document.getElementById("error").innerHTML = "<span class='error'>Please choose an eye color</span>";
}
else if (!skinTone){
  document.getElementById("error").innerHTML = "<span class='error'>Please choose a skin tone</span>";
}
}

      function initApplication(){
        //setup dropdown menu selection events
        Array.from(document.querySelectorAll(".dropdown-menu")).forEach((menu,idx)=>{
          const menuCallbackName = menu.attributes.onchange.value;
          const fetchedCallback = window[menuCallbackName] || null;

          if (fetchedCallback){
            Array.from(menu.children).forEach((child)=>{
              const callbackValue = child.attributes.data ? child.attributes.data.value : null;
              if (callbackValue) child.onclick = () => fetchedCallback(callbackValue);
            });
          } else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);

        });
      }

我的 index.html：

<title>Best Hair Color</title>


<!--Intro-->

<div class="container text-center">
    <div class="jumbotron">
        <h1 class="display-4" style="font-size: 2.5rem;"><i class="fas fa-user-alt"></i> Your Best Hair Color Is . . .</h1>
        <hr class="my-4">
        <p class="info">"The most flattering hair color comes when you have "THE PERFECT TRIO". A perfect trio is when your hair color matches your skin tone and eye color. Your perfect hair color will make your eyes POP. Your eyes will appear brighter and bigger. It will also go well with your skin tone. The right hair color will give your skin color, vibrance, and softness." <a href="http://salonenvychicago.com/" target="_blank"> - Salone Envy Chicago</a></p>

    </div>

    <!--Drop down Item 1 -->

    <h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
    <div class="dropdown">
        <div class="input-group justify-content-center">
            <div class="input-group-btn">
                <button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
                    Eye Color

                </button>

                <div class="dropdown-menu" onchange="selectMenu1"  aria-labelledby="dropdownMenuButton" id="eyeColor">
                    <a class="dropdown-item"  data="brown" ><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
                    <a class="dropdown-item"  data="blue" ><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
                    <a class="dropdown-item" data="green" ><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
                    <a class="dropdown-item"  data="hazel" ><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
                </div>



            </div>
        </div>
    </div>

    <!--Drop down Item 2-->

    <h3 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h3>
    <div id="menu2" class="dropdown">
        <div class="input-group justify-content-center">
            <div class="input-group-btn">
                <button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
                    Skin Tone
                </button>

                <div class="dropdown-menu" onchange="selectMenu2" aria-labelledby="dropdownMenuButton" id="skinTone">
                    <a class="dropdown-item"  data="fair"><img src="img/fair.jpg" class="rounded-circle" > Fair</a>
                    <a class="dropdown-item"  data="light"><img src="img/light.jpg" class="rounded-circle" > Light</a>
                    <a class="dropdown-item" data="medium"><img src="img/medium.jpg" class="rounded-circle" > Medium</a>
                    <a class="dropdown-item"  data="bronze"><img src="img/bronze_dark.jpg" class="rounded-circle" > Bronze</a>
                    <a class="dropdown-item"  data="tan"><img src="img/tan.jpg" class="rounded-circle" > Tan</a>
                    <a class="dropdown-item" data="rich"><img src="img/dark.jpg" class="rounded-circle" > Rich</a>
                </div>

                <div class="error" id="error"></div>

            </div>
        </div>
    </div>

    <br>

    <!--Result Button-->
    <label id="error"></label>
    <button type="button" class="btn btn-info btn-lg active" title ="Submit" style="background-color: #3e4444;" onclick="validate()"><i class="fas fa-arrow-circle-right fa-lg"></i></button>


    <script>
        $(".dropdown-menu a ").click(function(){
            $(this).parents(".input-group-btn").find('.btn').text($(this).text());
        });
    </script>
</body>
</html>

标签： javascripthtmlcss

解决方案

有很多方法可以改进你的代码，但如果你特别想清理你的冗余，你可以用这样的方式清理所有的选择函数：

function getColor (eyeColor, skinTone) {
  window.location = eyeColor + "/" + eyeColor + "_" + skinTone + ".html";
}

推荐阅读