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

Question

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

例如:您键入数字 7，单击按钮(max-value 属性从 5 变为 7)，现有的 5 个圆圈中增加了 2 个圆圈，一切都像以前一样工作。

附言不能修改 HTML 和 CSS。还有 here是 fiddle 版本。

$(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>');
};

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;
}

<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 1

也许这就是您要找的: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();

};