主页 / 问题 / 991536
Accepted
Слава Иванов
Asked:2020-06-11 07:12:05 +0000 UTC2020-06-11 07:12:05 +0000 UTC

使用 JS 在多个元素上更改样式

  • 772

有一个脚本可以使用 css 样式更改滑块的位置。当滑块单独时，一切正常。但如果你将它们相乘，问题就开始了。如何解决这种情况？

$(document).ready(function() {
  $('#show').on('click', function() {
    console.log($('input[name=size]:checked', '.product__size-control').val());
  });

  $('.product__size-control-input').on('click', function(){
    let value = Number.parseInt(this.value);
    let currentElement = $(this).parent().parent().find('.product__size-control-selector');
    let currentLabel = $(this).parent().find('.product__size-control-label');

    console.log(value);

    switch(value){
      case 1: currentElement.css('transform', 'translateX(0%)'); 
      break;
      case 2: currentElement.css('transform', 'translateX(100%)');
      break;
      case 3: currentElement.css('transform', 'translateX(200%)');
      break;
    }

  });
});
* {
  box-sizing: border-box;
}

::-webkit-input-placeholder {
  color: #878686;
}

::-moz-placeholder {
  color: #878686;
}

:-ms-input-placeholder {
  color: #878686;
}

:-moz-placeholder {
  color: #878686;
}

::-ms-clear, ::-ms-reveal {
  display: none;
}

.product__size-control {
  position: relative;
  display: flex;
  margin: 0 0 16px;
  padding: 0;
  background-color: #f1f2f5;
  border-radius: 100px;
}

.product__size-control-selector {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  width: 0;
  height: 100%;
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
  background-color: #fff;
  border: 1px solid #babfd0;
  border-radius: 100px;
}

.product__size-control-item {
  position: relative;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  width: 33.33333%;
  flex-grow: 1;
}

.product__size-control-label {
  position: relative;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid transparent;
  display: inline-block;
  height: 28px;
  width: 100%;
  color: rgba(55, 53, 53, .7);
  font-size: 12px;
  line-height: 26px;
  font-family: Dodo Medium, Helvetica, Arial, sans-serif;
  text-align: center;
  transition: color .2s ease-out;
}

.product__size-control-label:hover {
  color: #373535;
}

.product__size-control-label:focus {
  outline: 0;
}

.product__size-control-input {
  position: absolute;
  left: -9999px;
}

.product__size-control-input:checked + .product__size-control-label {
  color: #373535;
}

/*! CSS Used from: Embedded */
input {
  color: inherit;
  font: inherit;
  margin: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product__size-control">
  <div class="product__size-control-selector" style="width: 33.3333%; transform: translateX(0%);"></div>
  <div class="product__size-control-item">
    <input type="radio" class="product__size-control-input" id="size_20_3"name="size" value="1" checked="">
    <label class="product__size-control-label" data-testid="menu__pizza_size_3"
		for="size_20_3">35&nbsp;см</label>
  </div>
  <div class="product__size-control-item">
    <input type="radio" class="product__size-control-input" id="size_20_2" name="size" value="2">
    <label class="product__size-control-label" data-testid="menu__pizza_size_2"
		for="size_20_2">30&nbsp;см</label>
  </div>
  <div class="product__size-control-item">
    <input type="radio" class="product__size-control-input" id="size_20_1"name="size" value="3">
    <label class="product__size-control-label" data-testid="menu__pizza_size_1"
		for="size_20_1">25&nbsp;см</label>
  </div>
</div>

javascript

2 个回答

  1. 一切正常，如果你没有忘记你需要在每个副本中为 id 和 for 编写自己的值。

    $(document).ready(function() {
			$('#show').on('click', function() {
				console.log($('input[name=size]:checked', '.product__size-control').val());
			});

			$('.product__size-control-input').on('click', function(){
				let value = Number.parseInt(this.value);
				let currentElement = $(this).parent().parent().find('.product__size-control-selector');
				let currentLabel = $(this).parent().find('.product__size-control-label');

				console.log(value);

				switch(value){
					case 1: currentElement.css('transform', 'translateX(0%)'); 
					break;
					case 2: currentElement.css('transform', 'translateX(100%)');
					break;
					case 3: currentElement.css('transform', 'translateX(200%)');
					break;
				}

			});
		});
    * {
    box-sizing: border-box;
}

::-webkit-input-placeholder {
    color: #878686;
}

::-moz-placeholder {
    color: #878686;
}

:-ms-input-placeholder {
    color: #878686;
}

:-moz-placeholder {
    color: #878686;
}

::-ms-clear, ::-ms-reveal {
    display: none;
}

.product__size-control {
    position: relative;
    display: flex;
    margin: 0 0 16px;
    padding: 0;
    background-color: #f1f2f5;
    border-radius: 100px;
}

.product__size-control-selector {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    width: 0;
    height: 100%;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
    background-color: #fff;
    border: 1px solid #babfd0;
    border-radius: 100px;
}

.product__size-control-item {
    position: relative;
    list-style: none;
    display: inline-block;
    vertical-align: top;
    width: 33.33333%;
    flex-grow: 1;
}

.product__size-control-label {
    position: relative;
    cursor: pointer;
    border-radius: 100px;
    border: 1px solid transparent;
    display: inline-block;
    height: 28px;
    width: 100%;
    color: rgba(55, 53, 53, .7);
    font-size: 12px;
    line-height: 26px;
    font-family: Dodo Medium, Helvetica, Arial, sans-serif;
    text-align: center;
    transition: color .2s ease-out;
}

.product__size-control-label:hover {
    color: #373535;
}

.product__size-control-label:focus {
    outline: 0;
}

.product__size-control-input {
    position: absolute;
    left: -9999px;
}

.product__size-control-input:checked + .product__size-control-label {
    color: #373535;
}

/*! CSS Used from: Embedded */
input {
    color: inherit;
    font: inherit;
    margin: 0;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product__size-control">
	<div class="product__size-control-selector" style="width: 33.3333%; transform: translateX(0%);"></div>
	<div class="product__size-control-item">
		<input type="radio" class="product__size-control-input" id="size_20_3"name="size" value="1" checked="">
		<label class="product__size-control-label" data-testid="menu__pizza_size_3"
		for="size_20_3">35&nbsp;см</label>
	</div>
	<div class="product__size-control-item">
		<input type="radio" class="product__size-control-input" id="size_20_2" name="size" value="2">
		<label class="product__size-control-label" data-testid="menu__pizza_size_2"
		for="size_20_2">30&nbsp;см</label>
	</div>
	<div class="product__size-control-item">
		<input type="radio" class="product__size-control-input" id="size_20_1"name="size" value="3">
		<label class="product__size-control-label" data-testid="menu__pizza_size_1"
		for="size_20_1">25&nbsp;см</label>
	</div>
</div>
<div class="product__size-control">
	<div class="product__size-control-selector" style="width: 33.3333%; transform: translateX(0%);"></div>
	<div class="product__size-control-item">
		<input type="radio" class="product__size-control-input" id="size_20_6"name="size" value="1" checked="">
		<label class="product__size-control-label" data-testid="menu__pizza_size_3"
		for="size_20_6">35&nbsp;см</label>
	</div>
	<div class="product__size-control-item">
		<input type="radio" class="product__size-control-input" id="size_20_7" name="size" value="2">
		<label class="product__size-control-label" data-testid="menu__pizza_size_2"
		for="size_20_7">30&nbsp;см</label>
	</div>
	<div class="product__size-control-item">
		<input type="radio" class="product__size-control-input" id="size_20_8"name="size" value="3">
		<label class="product__size-control-label" data-testid="menu__pizza_size_1"
		for="size_20_8">25&nbsp;см</label>
	</div>
</div>

    • 2
  2. Best Answer

    首先，问题出在标签和单选按钮中......for="size_20_3"和类似的，在复制时，我将其更改为for="size_21_3"并且它有效：

    $(document).ready(function() {
  $('#show').on('click', function() {
    console.log($('input[name=size]:checked', '.product__size-control').val());
  });

  $('.product__size-control-input').on('click', function(){
    let value = Number.parseInt(this.value);
    let currentElement = $(this).parent().parent().find('.product__size-control-selector');
    let currentLabel = $(this).parent().find('.product__size-control-label');

    console.log(value);

    switch(value){
      case 1: currentElement.css('transform', 'translateX(0%)'); 
      break;
      case 2: currentElement.css('transform', 'translateX(100%)');
      break;
      case 3: currentElement.css('transform', 'translateX(200%)');
      break;
    }

  });
});
    * {
  box-sizing: border-box;
}

::-webkit-input-placeholder {
  color: #878686;
}

::-moz-placeholder {
  color: #878686;
}

:-ms-input-placeholder {
  color: #878686;
}

:-moz-placeholder {
  color: #878686;
}

::-ms-clear, ::-ms-reveal {
  display: none;
}

.product__size-control {
  position: relative;
  display: flex;
  margin: 0 0 16px;
  padding: 0;
  background-color: #f1f2f5;
  border-radius: 100px;
}

.product__size-control-selector {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  width: 0;
  height: 100%;
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
  background-color: #fff;
  border: 1px solid #babfd0;
  border-radius: 100px;
}

.product__size-control-item {
  position: relative;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  width: 33.33333%;
  flex-grow: 1;
}

.product__size-control-label {
  position: relative;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid transparent;
  display: inline-block;
  height: 28px;
  width: 100%;
  color: rgba(55, 53, 53, .7);
  font-size: 12px;
  line-height: 26px;
  font-family: Dodo Medium, Helvetica, Arial, sans-serif;
  text-align: center;
  transition: color .2s ease-out;
}

.product__size-control-label:hover {
  color: #373535;
}

.product__size-control-label:focus {
  outline: 0;
}

.product__size-control-input {
  position: absolute;
  left: -9999px;
}

.product__size-control-input:checked + .product__size-control-label {
  color: #373535;
}

/*! CSS Used from: Embedded */
input {
  color: inherit;
  font: inherit;
  margin: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product__size-control">
  <div class="product__size-control-selector" style="width: 33.3333%; transform: translateX(0%);"></div>
  <div class="product__size-control-item">
    <input type="radio" class="product__size-control-input" id="size_20_3"name="size" value="1" checked="">
    <label class="product__size-control-label" data-testid="menu__pizza_size_3"
		for="size_20_3">35&nbsp;см</label>
  </div>
  <div class="product__size-control-item">
    <input type="radio" class="product__size-control-input" id="size_20_2" name="size" value="2">
    <label class="product__size-control-label" data-testid="menu__pizza_size_2"
		for="size_20_2">30&nbsp;см</label>
  </div>
  <div class="product__size-control-item">
    <input type="radio" class="product__size-control-input" id="size_20_1"name="size" value="3">
    <label class="product__size-control-label" data-testid="menu__pizza_size_1"
		for="size_20_1">25&nbsp;см</label>
  </div>
</div>

<div class="product__size-control">
  <div class="product__size-control-selector" style="width: 33.3333%; transform: translateX(0%);"></div>
  <div class="product__size-control-item">
    <input type="radio" class="product__size-control-input" id="size_21_3"name="size" value="1" checked="">
    <label class="product__size-control-label" data-testid="menu__pizza_size_3"
		for="size_21_3">35&nbsp;см</label>
  </div>
  <div class="product__size-control-item">
    <input type="radio" class="product__size-control-input" id="size_21_2" name="size" value="2">
    <label class="product__size-control-label" data-testid="menu__pizza_size_2"
		for="size_21_2">30&nbsp;см</label>
  </div>
  <div class="product__size-control-item">
    <input type="radio" class="product__size-control-input" id="size_21_1"name="size" value="3">
    <label class="product__size-control-label" data-testid="menu__pizza_size_1"
		for="size_21_1">25&nbsp;см</label>
  </div>
</div>

    其次，既然已经用过JS，可以完全放弃标签，点击的时候，给点击的元素添加一个新的类，其他的样式都会写在里面。同时，看看代码简化了多少（主要是 HTML） 有时添加几行 JS 比做超级复杂的 CSS 技巧更容易。

    $(document).ready(function() {
  $('.product__size-control-item').on('click', function(){
    var i = $(this).parent().find('.product__size-control-item').index( $(this) );
    //Среди найденных классов у родителя кликнутого... находим индекс кликнутого элемента.
    console.clear(); console.log(i);
    
    var selector = $(this).parent().find('.product__size-control-selector');
    selector.css('transform', 'translateX(' + 100 * i + '%');
    // 100 * 0 == 0, 100 * 1 == 100, 100 * 2 == 200 ... и можно без case.
    
    $(this).parent().find('.product__size-control-item').removeClass('active');
    $(this).addClass('active'); // сюда дописать стили...
  });
});
    * {
  box-sizing: border-box;
}

::-webkit-input-placeholder {
  color: #878686;
}

::-moz-placeholder {
  color: #878686;
}

:-ms-input-placeholder {
  color: #878686;
}

:-moz-placeholder {
  color: #878686;
}

::-ms-clear, ::-ms-reveal {
  display: none;
}

.product__size-control {
  position: relative;
  display: flex;
  margin: 0 0 16px;
  padding: 0;
  background-color: #f1f2f5;
  border-radius: 100px;
}

.product__size-control-selector {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  width: 33.3333%;
  height: 100%;
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
  background-color: #fff;
  border: 1px solid #babfd0;
  border-radius: 100px;
}

.product__size-control-item {
  list-style: none;
  width: 33.33333%;  
  position: relative;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid transparent;
  height: 28px;
  width: 100%;
  color: rgba(55, 53, 53, .7);
  font-size: 12px;
  line-height: 26px;
  font-family: Dodo Medium, Helvetica, Arial, sans-serif;
  text-align: center;
  transition: color .2s ease-out;
}


.product__size-control-label:hover {
  color: #373535;
}



.product__size-control-input:checked + .product__size-control-label {
  color: #373535;
}

/*! CSS Used from: Embedded */
input {
  color: inherit;
  font: inherit;
  margin: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product__size-control">
  <div class="product__size-control-selector"></div>
  <div class="product__size-control-item">35&nbsp;см</div>
  <div class="product__size-control-item">30&nbsp;см</div>
  <div class="product__size-control-item">25&nbsp;см</div>
</div>

<div class="product__size-control">
  <div class="product__size-control-selector"></div>
  <div class="product__size-control-item">35&nbsp;см</div>
  <div class="product__size-control-item">30&nbsp;см</div>
  <div class="product__size-control-item">25&nbsp;см</div>
</div>

    • 2

相关问题