有没有办法可以用更少的行数编写我的js代码以使其更干净？

问题描述 投票：0回答：2

我正在尝试创建一个边框半径审阅器，其中矩形四个边的边框半径根据链接到每个边的四个文本框中输入的值而变化。这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border-radius previewer</title>
  <style>
    body,
    .outer-square {
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .inner-square {
      border: 1px solid #000;
      width: 400px;
      height: 200px;
      background-color: rgb(255, 255, 255);
    }
    
    .outer-square {
      border: 1px solid #000000;
      width: 500px;
      height: 300px;
      background-color: rgb(211, 200, 200);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-top: 100px;
    }
    
    input {
      width: 10px;
    }
    
    p {
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <div class="outer-square" id="outer-square">
    <div class="inner-square" id="inner-square">
      <p id="top-left-output"></p>
      <p id="top-right-output"></p>
      <p id="bottom-left-output"></p>
      <p id="bottom-right-output"></p>
    </div>
  </div>
  <input type="text" id="top-left-border-radius" value="0">
  <input type="text" id="top-right-border-radius" value="0">
  <input type="text" id="bottom-left-border-radius" value="0">
  <input type="text" id="bottom-right-border-radius" value="0">
  <script>
    const innerSquare = document.getElementById('inner-square')
    const outerSquare = document.getElementById('outer-square')

    //Inputs
    const topLeftInput = document.getElementById('top-left-border-radius')
    const topRightInput = document.getElementById('top-right-border-radius')
    const bottomLeftInput = document.getElementById('bottom-left-border-radius')
    const bottomRightInput = document.getElementById('bottom-right-border-radius')

    //This section contains declaration of output
    const top_left_output = document.getElementById('top-left-output')
    const top_right_output = document.getElementById('top-right-output')
    const bottom_left_output = document.getElementById('bottom-left-output')
    const bottom_right_output = document.getElementById('bottom-right-output')


    //Adding event listeners
    topLeftInput.addEventListener('input', function(e) {
      top_left_output.textContent = `border-top-left-radius: ${topLeftInput.value}px;`
      outerSquare.style.borderTopLeftRadius = `${topLeftInput.value}px`
    })

    topRightInput.addEventListener('input', function(e) {
      top_right_output.textContent = `border-top-right-radius: ${topRightInput.value}px;`
      outerSquare.style.borderTopRightRadius = `${topRightInput.value}px`
    })

    bottomLeftInput.addEventListener('input', function(e) {
      bottom_left_output.textContent = `border-bottom-left-radius: ${bottomLeftInput.value}px;`
      outerSquare.style.borderBottomLeftRadius = `${bottomLeftInput.value}px`
    })

    bottomRightInput.addEventListener('input', function(e) {
      bottom_right_output.textContent = `border-bottom-right-radius: ${bottomRightInput.value}px;`
      outerSquare.style.borderBottomRightRadius = `${bottomRightInput.value}px`
    })
  </script>
</body>

</html>

这段代码大致满足了我的要求。但我相信我应该能够用更少的代码行来完成此操作。我能想出这个。但是，我无法使用数据属性“输出”在 

div
中添加文本。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border-radius previewer</title>
  <style>
    body,
    .outer-square {
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .inner-square {
      border: 1px solid #000;
      width: 400px;
      height: 200px;
      background-color: rgb(255, 255, 255);
    }
    
    .outer-square {
      border: 1px solid #000000;
      width: 500px;
      height: 300px;
      background-color: rgb(211, 200, 200);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-top: 100px;
    }
    
    input {
      width: 10px;
    }
    
    div {
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <input type="text" data-border-radius="top-left-border-radius" value="0">
  <input type="text" data-border-radius="top-right-border-radius" value="0">
  <input type="text" data-border-radius="bottom-left-border-radius" value="0">
  <input type="text" data-border-radius="bottom-right-border-radius" value="0">

  <div class="outer-square" data-outer-square>
    <div class="inner-square" data-inner-square>
      <div data-output="top-left-border-radius"></div>
      <div data-output="top-right-border-radius"></div>
      <div data-output="bottom-left-border-radius"></div>
      <div data-output="bottom-right-border-radius"></div>
    </div>
  </div>

  <script>
    const innerSquare = document.querySelector("[data-inner-square]")
    const outerSquare = document.querySelector("[data-outer-square]")
    const inputs = document.querySelectorAll("[data-border-radius]")
    const outputs = document.querySelectorAll("[data-output]")

    inputs.forEach(input => {
      input.addEventListener('input', (e) => {
        const borderRadius = input.dataset.borderRadius

        if (borderRadius == 'top-left-border-radius') {
          outerSquare.style.borderTopLeftRadius = `${input.value}px`
        } else if (borderRadius == 'top-right-border-radius') {
          outerSquare.style.borderTopRightRadius = `${input.value}px`
        } else if (borderRadius == 'bottom-right-border-radius') {
          outerSquare.style.borderBottomRightRadius = `${input.value}px`
        } else outerSquare.style.borderBottomLeftRadius = `${input.value}px`
      })
    })
  </script>
</body>

</html>

任何帮助将不胜感激。

javascript loops foreach
2个回答
1
投票

让代码更清晰地命名每一个变量、属性。

-html

 <div class="inner-square" data-inner-square>
  <div id="borderTopLeftRadiusOutput"></div>
  <div id="borderTopRightRadiusOutput"></div>
  <div id="borderBottomLeftRadiusOutput"></div>
  <div id="borderBottomRightRadiusOutput"></div>
</div>
...
<input type="text" data-border-radius="borderTopLeftRadius" value="0">
<input type="text" data-border-radius="borderTopRightRadius" value="0">
<input type="text" data-border-radius="borderBottomLeftRadius" value="0">
<input type="text" data-border-radius="borderBottomRightRadius" value="0">

-javascript

inputs.forEach((input) => 
  input.addEventListener("input", (e) => {
    const field = input.dataset.borderRadius;
    document.getElementById(`${field}Output`).textContent =
      `${field}: ${input.value}px;`;
    outerSquare.style[field] = `${input.value}px`;
  })
);

我只更改了每个 

input
的 id 并输出 
div
。

我想我的回答会对你有帮助。

0
投票

你可以使用CSS变量:

const
  myForm      = document.querySelector('#my-form')
, outerSquare = document.querySelector('#outer-square')
, retour =
    { tl : document.querySelector('#top-left-output')
    , tr : document.querySelector('#top-right-output')
    , bl : document.querySelector('#bottom-left-output')
    , br : document.querySelector('#bottom-right-output')
    } 
  ;
myForm.reset();
myForm.onsubmit = e => e.preventDefault();
myForm.onchange = ({target:inRange}) =>
  {
  inRange.nextSibling.textContent  = inRange.value;
  retour[inRange.name].textContent = inRange.value;
  outerSquare.style.setProperty('--bradius',  `${myForm.tl.value}px ${myForm.tr.value}px ${myForm.bl.value}px ${myForm.br.value}px `);
  }
#outer-square {
  display        : table-cell;
  vertical-align : middle;
  text-align     : center;
  --bradius      : 0px 0px 0px 0px;
  border         : 1px solid black;
  width          : 500px;
  height         : 300px;
  background     : #d3c8c8;  
  margin         : 20px;
  border-radius  : var(--bradius);  
  }
#inner-square {
  display    : inline-block;
  width      : 60%;  
  padding    : 10px;
  border     : 1px solid black;
  background :whitesmoke;
  text-align : left;
  }
#inner-square > p::before {
  content : attr(id) ': '
  }
#inner-square > p::after {
  content : 'px'
  }
label {
  display: block;
  height: 2em;
  }
label * {
  vertical-align: middle; 
  }
label > span:first-of-type { 
  display    : inline-block; 
  width      : 9em; 
  text-align : right; 
  }
<div id="outer-square">
  <div id="inner-square">
    <p id="top-left-output">0</p>
    <p id="top-right-output">0</p>
    <p id="bottom-left-output">0</p>
    <p id="bottom-right-output">0</p>
  </div>
</div>

<form id="my-form">
  <label><span>top-left :    </span> <input type="range" name="tl" min="0" max="100" value="0"><span>0</span> </label>
  <label><span>top-right :   </span> <input type="range" name="tr" min="0" max="100" value="0"><span>0</span> </label>
  <label><span>botom-left :  </span> <input type="range" name="bl" min="0" max="100" value="0"><span>0</span> </label>
  <label><span>botom-right : </span> <input type="range" name="br" min="0" max="100" value="0"><span>0</span> </label>
</form>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.