Question

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

应用程序：当用户选择eyeColor和skinTone时，将打开一个新的html结果页面（window.location），并向他们展示其3种最佳发色。

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

我很难研究我想做的事情，因为在窗口中添加img src会很困难，如果不清楚img在结果页上的正确位置，从技术上讲，这行不通吗？很抱歉，我还是个初学者。如果有人可以为我指明正确的方向，或者为我要完成的工作提供建议的教程，那将有所帮助。

除非我的代码与目前的代码一样完美，但是从我的研究来看，重复/冗余的代码永远都不好。如果有人可以友善告诉我。

我的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>

Answer 1

有很多方法可以改善代码，但是如果您特别想清理冗余，则可以使用以下方法清理所有选择函数：

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

Answer 2

如果您的代码已经在工作，则可以通过以下方式替换冗余代码：

window.location = `{eyeColor}/{eyeColor}_{skinTone}.html`;

Answer 3

我可以为您提供两种解决方案，

使用同一组页面，而不是重定向整个页面，而是让您使用iframe在iframe中加载所需的任何页面
我的方式：使用图像标签，并将其与所需的任何图像源一起作为字节数组提供。

Answer 4

所以基本上我的建议是：

<!--index.html-->

<!--after result-button-->
<div id="brown_fair" style="display:hidden">
  <!-- here goes your brown/brown_fair.html content, or what you want of it-->
</div>
<!--one more div for each possible result-->

并在您的JavaScript中：

function validate()  { 
  if (eyeColor && skinTone){
          // alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
      if (eyeColor=="brown" && skinTone=="fair") {
        //toggle element visibility
        document.getElementById("brown_fair").style.display(desiredDisplay);
      }

      //...
   }
}

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

4 个答案: