Question

我如何为2个CSS项目实现这个JQuery Round Corner Plugin？

这是我的1个CSS类项目“global-inner”的实现：

<script type="text/javascript">
    $('#global-inner').corner('15px');
</script>

#global-inner 
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}
#mid-featureright-faq .contentbox
{
width:284px;
/*padding:6px;*/
padding:6px 6px 1px 6px;
margin:0 0 0 0;
position:relative;
background-color:#D5DBE0;
/*background-color:Red;*/
}

我还需要为这个类添加这个实现：＃mid-featureright-faq .contentbox

以下是JsFiddle的一个工作示例： http://jsfiddle.net/VLPpk/26/

这是一个只有1个CSS类的实现： JQuery Rounded Corners Implementation

我试图实现Ken的建议，我现在尝试将一个类传递给函数，所以我将一些以前ID的CSS函数更改为Classes：

#global-wrap .rounded 
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}

<script type="text/javascript">
    $('.rounded').corner('15px');
</script>

然而，这不适用于我定义的另一个舍入类：

#mid-featureright-faq
{
width:296px;
float:left;
position: relative;
/*background-color:#D5DBE0;*/
}
#mid-featureright-faq .contentheader
{
height:53px;
width:296px;
margin:0 0 0 0;
position:relative;
background-color:green;
}    
#mid-featureright-faq .rounded
{
width:284px;
/*padding:6px;*/
padding:6px 6px 1px 6px;
margin:0 0 0 0;
position:relative;
/*background-color:#D5DBE0;*/
background-color:Red;
}

<div id="mid-featureright-faq">
    <div class="contentheader">
    </div>
    <div class="rounded">here
    </div>
</div>

Answer 1

如果您希望您的选择器按ID匹配多个项目，您可以执行以下操作：

$('#global-inner, #mid-featureright-faq').corner('15px');

更好的方法可能是为每个元素添加一个类，并根据该类进行选择：

<div id="global-inner" class="content"> Stuff </div>
<div id="mid-featureright-faq" class="content"> Junk </div>

...然后：

$('.content').corner('15px');

为了获得更好的性能，您可以考虑缩小选择器的范围：

$('#some-outer-container').children('.content').corner('15px');

Answer 2

此解决方案适用于两个不同的类：

<script type="text/javascript"> 
    $('.contentboxx, .rounded').corner('15px');
</script>

<div id="global-wrap">
    <div class="rounded">
    </div>
</div>

<div id="mid-featureright-faq">
    <div class="contentheader">
    </div>
    <div class="contentboxx">
    </div>  
</div>

2个类的圆角实现

2 个答案: