Question

我正在做一个项目，在这里有些困惑，也许有人对可以做什么有个想法。我正在一个系统上工作，该系统将为我正在使用的系统提供6个用于颜色选项的输入部分，而我正在做的工作取决于他们当前所关注的输入，它将显示特定的背景图像。在系统右侧的div中，它基本上是一个图表，显示特定输入的影响。

以下是示例图片：

我一直在考虑是否可以仅使用CSS：focus来使用CSS，但是我发现对它没有帮助。我敢肯定我可以使用jQuery，但是我几乎不了解jQuery。我可以轻松制作表格，但是更改表格后，它会卡住特定div的背景图像。

感谢任何想法/帮助。

编辑：我最初是如何使用CSS进行处理的示例如下：

<!DOCTYPE html>
<html>
<head>
<style>
#test:focus + #test3{
    background-color: yellow;
}
#test2:focus + #test3{
    background-color: red;
}
#test3{
    width:250px;
    height:150px;
    border: 1px solid #000;
}
</style>
</head>
<body>


<form>
Input #1: <input id="test" type="text" name="firstname"><br>
Input #2: <input id="test2" type="text" name="lastname">
</form>
<br>
<div id="test3">&nbsp;</div>


</body>
</html>

Answer 1

这里有一些jQuery代码可以完成您想做的事情。您可以将data-color属性替换为data-url属性，并使用它来设置背景。这里没有很多代码，只有$( element).on( 'focus', function() {...}这是一种常用的jQuery事件处理结构。

如果不想在离开输入时重置背景，则可以跳过与blur事件相关的事件处理程序。

const displayArea = $( '.display-area' );

$( 'input' ).on( 'focus', function() {
  const color = $( this ).data( 'color' );
  displayArea.css( 'background', color );
});

$( 'input' ).on( 'blur', function() {
  displayArea.css( 'background', '' );
});

.form-row {
display: flex;
justify-content: flex-start;
}

.input-column {
margin: -5px;
}

.input-column input {
display: block;
margin: 5px;
}

.display-area {
margin-left: 10px;
background: red;
width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
  <div class="input-column">
    <input data-color="green">
    <input data-color="blue">
    <input data-color="yellow">
    <input data-color="orange">
  </div>
  <div class="display-area">
  </div>

Answer 2

这可以通过CSS实现。

使显示区域保持输入的同级，并完全定位显示区域。

然后可以将general sibling sector ~与:focus结合使用以实现所需的功能。在您的代码中，您正在使用+，即adjacent sibling selector

.input-column {
  width: 50%;
  position: relative;
}

.input-column input {
  float: left;
  width: 30%;
  margin: 5px;
}

.input-column label {
  float: left;
  width: 30%;
  margin: 5px;
  clear: left;
}

.display-area {
  position: absolute;
  top: 0;
  left: 70%;
  background: red;
  width: 200px;
  height: 200px;
  float: right;
}

.bill:focus~.display-area {
  background-image: url('https://www.fillmurray.com/200/200');
}

.billGrey:focus~.display-area {
  background-image: url('https://www.fillmurray.com/g/200/200');
}

.nick:focus~.display-area {
  background-image: url('https://www.placecage.com/200/200');
}

.nickGrey:focus~.display-area {
  background-image: url('https://www.placecage.com/g/200/200');
}

<form>
  <div class="input-column">
    <!-- <form> could also go here -->

    <label for="bill">Bill</label> <input id="bill" class="bill">
    <label for="billGrey">Grey Bill</label><input id="billGrey" class="billGrey">
    <label for="nickGrey">Grey Nick</label><input id="nickGrey" class="nickGrey">
    <label for="nick">Nick</label><input id="nick" class="nick">

    <div class="display-area">
    </div>
    <!-- </form> alternate postion -->
  </div>
</form>

可以通过使用CSS sprites消除加载后续图像的延迟来改善这一点

重点输入更改单独div的背景

2 个答案: