Question

所以我在论坛里查了一下，认为我已经弄明白了：

$( document ).ready(function() {

    months = ['January','Februari','Mars','April','May','June','July','August','September','October','November','December'];
    days = [31,28,31,30,31,30,31,31,30,31,30,31]

    for(i = 1; i <= 12; i++){
        $('.months').append('<div class="month" id='+i+'><p>'+months[i-1]+'</p></div>');
    }

    for(j = 1; j<=31; j++){
        $('.days').append('<div class="numberDays"><p>'+j+'</p></div>');
    }

    $('.months').click(function(){
        var id = this.id;
        alert(id);
        //$().css({'background':'red'});
    });
});

该计划基本上是获取点击的div id（使用类months）并将其背景更改为红色而不更改其他div的背景颜色。但是this.id没有返回任何内容，nada，它完全是空白的。

我也用过：

$('.months').clicked(function(){
   var id = $(this).attr(id);
   alert(id);
});

但id最终未被定义。

Answer 1

.append()在指定的div中插入内容。换句话说，您将click事件绑定到父.months，您需要将它绑定到子项：

DEMO：https://jsbin.com/kebisusufi/edit?html,js,output

$( document ).ready(function() { var months = ['January','Februari','Mars','April','May','June','July','August','September','October','November','December']; var days = [31,28,31,30,31,30,31,31,30,31,30,31]; for(i = 1; i <= 12; i++){ $('.months').append('<div class="month" id='+i+'><p>'+months[i-1]+'</p></div>'); } for(j = 1; j<=31; j++){ $('.days').append('<div class="numberDays"><p>'+j+'</p></div>'); } // you can also use $('.month') or any other selector $('.months div').click(function(){ var id = this.id; alert(id); //$().css({'background':'red'}); }); });

Answer 2

$('.months')

是另一个月div的父div。你刚刚选择了父母。它应该是

$('.month').click(function(){
  var id = $(this).attr(id);
  alert(id);
});

Answer 3

你不需要在这里申请css，你可以简单地使用：

＆＃13;

$(function() {

  var months = ['January', 'Februari', 'Mars', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  for (i = 1; i <= 12; i++) {
    $('.months').append('<div class="month" id=' + i + '><p>' + months[i - 1] + '</p></div>');
  }

  $('.months').on('click', 'div', function(e) {
    $(this).closest('.months').find('div').css({
      'background': 'inherit'
    }); //clear previous selection
    $(this).css({
      'background': 'red'
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="months"></div>

＆＃13;

由于css没有任何动态，您可以选择$.addClass()和$.removeClass()：

＆＃13;

$(function() {

  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  $.each(months, function(_, txt) {
    $('.months').append('<div class="month">' + txt + '</div>');
  });

  $('.months').on('click', 'div', function(e) {
    $(this).closest('.months').find('div').removeClass('mark'); //clear previous selection
    $(this).addClass('mark');
  });
});

＆＃13;

.month {
  padding: 3px 4px;
  background: blue;
  color: white;
  font-weight: bold;
  margin-bottom: 2px;
  cursor: pointer;
}
.mark {
  background: red !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="months"></div>

＆＃13;

如果你想获得id：

＆＃13;

$(function() {

  var months = ['January', 'Februari', 'Mars', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

  for (i = 1; i <= 12; i++) {
    $('.months').append('<div class="month" id=' + i + '><p>' + months[i - 1] + '</p></div>');
  }

  $('.months').on('click', 'div', function(e) {
    alert(this.id);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="months"></div>

＆＃13;

Answer 4

试试这个： -

UIView

问题是月份与div有关，而不是与班级为＃34;月份的个别月份有关。这应该按预期工作。

单击时从div中提取id

4 个答案: