CSS修复了使用Razor和MVC3的webgrid寻呼机方法

Question

我正在使用带Razor的MVC3,用于显示我正在使用WebGrid的网格,并且对于这个非常网格的分页,我使用以下代码.

我的问题:分页按钮在选择/单击时以及未选中/单击时都应保持相同的大小.

我有一些CSS问题,我已经使用CSS和javascript来实现我的客户想要的设计我已经在这个小提琴链接复制了它http://fiddle.jshell.net/Z5L4g/

剃刀代码

@grid.Pager(mode: WebGridPagerModes.All, numericLinksCount: 15, firstText: "<<", lastText: ">>", previousText: "<", nextText: ">")

我的CSS代码 正文{font-family:Calibri; 背景色:#D8D8D8; margin-top:0px; 文字修饰:无; }

    #footer:not([href]) {
    letter-spacing: 0px;
    }

    #footer {
    text-align: center;
    margin-top: 10px;
    }

    .pagingCss {
    font-size: 13px;
    }

    .whiteBox {
    background-color: 
    white;
    color: 
    black;
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-decoration: none;
    margin-top: 10px;
    letter-spacing: 0px;
    }

    .blackBox {
    background-color: 
    black;
    color: 
    white;
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-decoration: none;
    margin-top: 10px;
    letter-spacing: 0px;
    }

    .pagingCss a {
    font-size: 13px;
    color: white;
    text-decoration:none;
    }

我用过的Javascript代码

    var keywords = ['>>', '<<', '<', '>'];

    function linklabels() {

        var footerDiv = document.getElementById('footer');
        var oldLinks = footerDiv.getElementsByTagName('A');

        var oldLinksCount = oldLinks.length;
        var keywordsCount = keywords.length;

        for (var i = 0; i < oldLinks.length; i++) {

            if (oldLinks[i].firstChild.nodeValue == '>>' || oldLinks[i].firstChild.nodeValue == '<<' || oldLinks[i].firstChild.nodeValue == '>' || oldLinks[i].firstChild.nodeValue == '<') {
                var my_div = null;
                var newDiv = null;

                var newDiv = document.createElement("span");
                var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue);
                newDiv.appendChild(newContent);
                newDiv.className = "whiteBox";

                oldLinks[i].firstChild.nodeValue = "";

                oldLinks[i].appendChild(newDiv);
            }
            else {
                var my_div = null;
                var newDiv = null;

                var newDiv = document.createElement("span");
                var newContent = document.createTextNode(oldLinks[i].firstChild.nodeValue);
                newDiv.appendChild(newContent);
                newDiv.className = "blackBox";

                oldLinks[i].firstChild.nodeValue = "";

                oldLinks[i].appendChild(newDiv);
            }

        } // end of for

        //  footer

    }
    window.onload = linklabels; 

以下是使用上述代码后我的HTML呈现方式

并且代码呈现为html如下

<div id="footer" class="pagingCss">

<a href="/CompanySearch/Home/Results?page=1">
    <span class="whiteBox">&lt;&lt;</span>
</a>

<a href="/CompanySearch/Home/Results?page=5">
    <span class="whiteBox">&lt;</span>
</a>

<a href="/CompanySearch/Home/Results?page=1">
    <span class="blackBox">1</span>
</a>

<a href="/CompanySearch/Home/Results?page=2">
    <span class="blackBox">2</span>
</a>

<a href="/CompanySearch/Home/Results?page=3">
    <span class="blackBox">3</span>
</a>

<a href="/CompanySearch/Home/Results?page=4">
    <span class="blackBox">4</span>
</a> 

<a href="/CompanySearch/Home/Results?page=5">
    <span class="blackBox">5</span>
</a>

6 <a href="/CompanySearch/Home/Results?page=7">
<span class="blackBox">7</span>
</a>

<a href="/CompanySearch/Home/Results?page=8">
    <span class="blackBox">8</span>
</a>

<a href="/CompanySearch/Home/Results?page=9">
    <span class="blackBox">9</span>
</a> 

<a href="/CompanySearch/Home/Results?page=10">
    <span class="blackBox">10</span>
</a> 

<a href="/CompanySearch/Home/Results?page=7">
    <span class="whiteBox">&gt;</span>
</a> 

<a href="/CompanySearch/Home/Results?page=10">
    <span class="whiteBox">&gt;&gt;</span>
</a>
    </div>?

我知道要做到这一点真有一些方法或技巧,我找不到......请帮我解决这个问题.

Answer 1

正如我在评论中所说，

不要试图治愈症状。在你的情况下，CSS修复不会解决问题，因为没有文本节点的选择器。

一个快速的 jquery 修复将解决这个问题：

$(function() {  
 $("#footer").contents().filter(function() {

     var $this = $(this);
     return $this.children().length == 0 && $.trim($this.text()).length > 0;

 }).wrap("<span class='selectedBox' />");       
});   

这将使用带有类 selectedBox 的跨度来包装您的单独文本元素，您必须为其添加一些 css。 您可以在这里看到它的实际效果。

这里更新 是一个完整的解决方案 这也替换了您的 linklabels javascript 代码：

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

$(function() {  
 $("#footer a").contents().wrap("<span class='blackBox' />");
 $("#footer").find("a span").each(function(){
    var val = $.trim($(this).text());
    if (!isNumber(val))
       $(this).attr('class', 'whiteBox');      
  });    

 $("#footer").contents().filter(function() {

     var $this = $(this);
     return $this.children().length == 0 && $.trim($this.text()).length > 0;

 }).wrap("<span class='whiteBox' />");       
});