Question

我觉得我非常接近这一点，但并不完全。我不是jQuery和CSS的天才。
我的目标：在日历函数的表数据单元格中动态构建div。输入由日期范围确定。对于完整的预定日期，我有一个蓝色方块（CSS）。对于部分日子，我创建了一个依赖于早晨或下午的三角形区域（同样是CSS）。
问题：上午和下午的重叠。
到目前为止我得到了什么：http://jsfiddle.net/9hnNk/ 1

任何人都可以在我的jQuery选择器/替换中告诉我这里缺少什么吗？
HTML：

<table>
<tbody>
    <tr>
        <td>
            morning:<br/>
            <div class="morning"></div>
        </td>
        <td>
            afternoon:<br/>
            <div class="afternoon"></div>
        </td>
        <td>
            split day:<br/>
            <div class="morning"></div>
            <div class="afternoon"></div>
        </td>
    </tr>
</tbody>

的 CSS：

.morning{width:0;height:0;border-bottom:60px solid transparent;border-left:94px solid #0066CC;font-size:0;line-height:0;}
.afternoon{width: 0; height: 0;border-bottom: 1px solid transparent;border-top: 59px solid transparent;border-right: 95px solid #0066CC;font-size: 0;line-height: 0;}
.fullDay{border:30px;border-color:#0066CC;border-style:solid;height:0;width:32px;float:left;color:#FFFFFF;margin-left:2px;}
.splitDay{line-height:0%;width:0px;border-top:60px outset #0066CC;border-right: 100px dashed #0066CC;}

的使用Javascript：

jQuery(document).ready(function ($) {
if ($("td:has(div.afternoon):has(div.morning)")){
    $(".morning").addClass('splitDay').removeClass('morning');
    $(".afternoon").remove();
    }

}）;

Answer 1

是的你非常接近，你正在检查案件是否存在。但是你需要确保你只是操纵符合你情况的行。为此，将case元素设置为变量，然后仅操作该变量，只修改split day元素而不是页面上的所有元素。

jQuery(document).ready(function ($) {
if ($("td:has(div.afternoon):has(div.morning)")){
    var splitday = $("td:has(div.afternoon):has(div.morning)");

    splitday.find(".morning").addClass('splitDay').removeClass('morning');
    splitday.find(".afternoon").remove();
    }
});

实施例

http://jsfiddle.net/9hnNk/4/

Answer 2

你的jQuery的问题在于你正在用$(".morning")和$(".afternoon")创建一个全新的选择器，这些选择器会在你的整个html中搜索这些类的div。要找到正确的选择器，您需要保存if选择器并稍后使用.find，如下所示：

jQuery(document).ready(function ($) {
    var $splitdays = $("td:has(div.afternoon):has(div.morning)");
    if ($splitdays) {
    $splitdays.find(".morning").addClass('splitDay').removeClass('morning');
    $splitdays.find(".afternoon").remove();
    }
});

如果它们存在于TD中，则jQuery替换两个div类

2 个答案: