Question

即时尝试执行以下操作，即手动将数据类型设置为“红色”， 然后它会在cm-coupon之后添加红色，如果hasClass为红色则，然后会显示红色的css。 如果 div中的数据类型为“绿色”，则在cm-coupon 后添加类绿色，显示绿色的CSS >

但我不知道如何将数据类型从html调用到脚本？是否需要使用find（）;或者attr（）; ？

<div class="cm-coupon data-type="red"></div>

$( document ).ready(function() {
// document
    var coupon = $('div.cm-coupon');

    $('.cm-coupon').append('<div class="cm-cp-title"></div>');
    //if data-type = "red"
        $(this).addClass('red');
        $('.cm-coupon').append('<div class="cm-cp-title">title-01</div>');
    // if data-type = "green"
        $(this).addClass('green');
        $('.cm-coupon').append('<div class="cm-cp-title">title-02</div>');

    // Call each css with different class
    if (coupon.hasClass('red')) {
        $('.cm-coupon').css({"background" : "red", "padding": "20px 0"});
    } else if (coupon.hasClass('green')) {
        $('.cm-coupon').css({"background" : "green", "padding": "20px 0"});
    } else {
        return coupon;
    }
});//end

Answer 1

尝试$(element).data('type');从html获取data-type的值

Answer 2

<div class="cm-coupon" data-type="red"></div> //Double quotes was missing
$( document ).ready(function() {
  var coupon = $('div.cm-coupon');
  $('.cm-coupon').append('<div class="cm-cp-title"></div>');
  if ($(".cm-coupon").data('type') == "red")
  {
    $(this).addClass('red');
    $('.cm-coupon').append('<div class="cm-cp-title">title-01</div>');
  }
  else if $(".cm-coupon").data('type') == "green")
  {
    $(this).addClass('green');
    $('.cm-coupon').append('<div class="cm-cp-title">title-02</div>');
  }
  // Call each css with different class
  if (coupon.hasClass('red')) 
  {
    $('.cm-coupon').css({"background" : "red", "padding": "20px 0"});
  } 
  else if (coupon.hasClass('green')) 
  {
    $('.cm-coupon').css({"background" : "green", "padding": "20px 0"});
  } 
  else 
  {
    return coupon;
  }
});//end

您在html中的类名后缺少双引号。
if语句的条件不合适。

Answer 3

在更改类（添加，删除，切换等）之前，请确保这些类的样式已在样式表或<style>块中声明。在演示中，.red和.green类在CSS中声明，因此OP代码中调用的.css()方法最初是不必要的，并且已被删除。

代码是动态编写的，用于处理来自data-type和data-title的任何值。

处理data-*属性时：

jQuery方法 .data() 和 .attr() 方法可以获取/设置data-*的值。在这两种方法中，前者.data()更适合处理它们。
语法：
- 从...... $(selector).attr("data-red");
- 设置值为$(selector).attr("data-red", "red");
- 从...... $(selector).data("red");
- 设置值为$(selector).data("red", "red");

详情在演示

点击

演示

/* Added the typical click event...
*/
$('div.cm-coupon').on('click', function() {
  
  // Appending a div...
  $(this).append('<div class="cm-cp-title"></div>');

  // Get the data-type value
  var dType = $(this).data('type');
  
  // Get the data-title value
  var dTitle = $(this).data('title');
  
  // If data-type does exist...
  if (dType) {
    
    /* ...add the class dType and append another div
    || but this time add its dTitle to it
    */
    $(this).addClass(dType).append('<div class="cm-cp-title">' + dTitle + '</div>');

  } else {
  
    // ...otherwise end function
    return false;
  }

});

html,
body {
  font: 600 16px/1.5 Consolas
}

.cm-coupon {
  width:250px;
  height:100px;
  border: 3px double #444;
  text-align:center;
  font-size:64px;
  color: #fff
  }
.red {
  background: red;
  padding: 20px 0
}

.green {
  background: green;
  padding: 20px 0
}

<div class="cm-coupon" data-type="red" data-title='RED'></div>


<div class='cm-coupon' data-type='green' data-title='GRN'></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

您可以像下面一样获得data-type值。

var data_type = $('.cm-coupon').attr('data-type');

它返回数据类型值。

<强>演示

＆＃13;

var data_type = $('.cm-coupon').attr('data-type');
console.log(data_type);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cm-coupon" data-type="red"></div>

＆＃13;

检查数据值是否不同

4 个答案:

演示