Question

我有5个具有特殊功能的评级圈。如何通过将数字设置为输入并单击按钮来更改max-value="5"属性来添加新元素。此外，我需要保存所有现有功能并将其应用于新添加元素，就像之前一样（可能使用delegate方法）。

例如：您输入数字7，点击按钮（max-value属性从5更改为7），2个圆圈添加到现有的5个圆圈，一切都继续像以前一样工作。

P.S。无法修改HTML和CSS。 here也是小提琴版。

＆＃13;

$(function() {

  // Frequently used variable:
  var item = $('.rating-circle');
  var container = $('#rating-container');

  // Rating-hover effects:
  item.hover(function() {
    $(this).prevAll(item).andSelf().toggleClass('rating-hover');
  });

  container.on('mouseout', function() {
    item.each(function() {
      if ($(this).prop('data-chosen') == '1') {
        $(this).addClass('rating-chosen');
      }
    });
  });

  container.on('mouseover', function() {
    item.removeClass('rating-chosen');
  });

  // Rating-chosen effects:
  var chosen = item.click(function() {
    chosen.removeClass('rating-chosen').prop('data-chosen', '0');
    $(this).prevAll(item).andSelf().addClass('rating-chosen').prop('data-chosen', '1');
  });

});


$(function() {
  $(document).on('click', '#update-max-value', function1);
});

function function1() {
  $('#rating-container').append('<div class="rating-circle"></div>');
};

＆＃13;

body {
  font-family: Verdana;
}

h1, h2, h3 {
  color: darkblue;
}

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Rate this session</h3>
<div id="rating-container" max-value="5">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

<div>
  <label for="max-value">Enter max value:</label>
  <input type="text" id="max-value" />
  <button type="button" id="update-max-value">Update max value</button>
</div>

＆＃13;

感谢收看！

Answer 1

您可以尝试类似

的内容

$(function() {

  // Frequently used variable:
  var item = $('.rating-circle');
  var container = $('#rating-container');

  // Rating-hover effects:
  container.on('mouseenter mouseleave', '.rating-circle', function(e) {
    $(this).prevAll(item).andSelf().toggleClass('rating-hover', e.type == 'mouseenter');
  }).on('click', '.rating-circle', function() {
    container.find('.rating-chosen').removeClass('rating-chosen');
    $(this).prevAll('.rating-circle').andSelf().addClass('rating-chosen');
  });

});


$(function() {
  $(document).on('click', '#update-max-value', function1);
});

function function1() {
  var $circles = $('#rating-container .rating-circle');
  var value = +$('#max-value').val() || 0;

  $('#rating-container').attr('max-value', value);
  if ($circles.length < value) {
    $('#rating-container').append(new Array(value - $circles.length + 1).join('<div class="rating-circle"></div>'));
  } else if ($circles.length > value) {
    $circles.slice(value).remove()
  }
};

body {
  font-family: Verdana;
}
h1,
h2,
h3 {
  color: darkblue;
}
.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}
#rating-container:hover .rating-chosen {
  background-color: white;
}
.rating-hover,
#rating-container:hover .rating-hover {
  background-color: yellow;
}
.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Rate this session</h3>
<div id="rating-container" max-value="5">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

<div>
  <label for="max-value">Enter max value:</label>
  <input type="text" id="max-value" />
  <button type="button" id="update-max-value">Update max value</button>
</div>

Answer 2

也许这就是你要找的东西：jsfiddle

$(
start = function () {

// Frequently used variable:
var item = $('.rating-circle');
var container = $('#rating-container');

// Rating-hover effects:
item.hover(function () {
    $(this).prevAll(item).andSelf().toggleClass('rating-hover');
});

container.on('mouseout', function () {
    item.each(function () {
        if ($(this).prop('data-chosen') == '1') {
            $(this).addClass('rating-chosen');
        }
    });
});

container.on('mouseover', function () {
    item.removeClass('rating-chosen');
});

// Rating-chosen effects:
var chosen = item.click(function () {
    chosen.removeClass('rating-chosen').prop('data-chosen', '0');
    $(this).prevAll(item).andSelf().addClass('rating-chosen').prop('data-chosen', '1');
});

$(document).on('click', '#update-max-value', function1);
});

function function1 () {
    var n = $('#max-value').val();
    var txt = '';
    $('#rating-container').attr('max-value', n);
    for( var i = 0; i < n; i++){
        txt += '<div class="rating-circle"></div>';
    };
    $('#rating-container').html(txt);
    start();

};

使用jQuery通过输入添加新的评级元素

2 个答案: