Question

我正在尝试完成一个简单的函数，这段代码出了什么问题？

基本上我尝试覆盖跨度，其宽度与包含<a>链接的宽度完全相同。因此，我希望黑色跨度框（在示例中）与包含灰色框一样宽。

＆＃13;

function vg() {
    if ($("body").hasClass("work-page")) {
        var a = $(".projTitle").width();
        $(".subtitle").css({
            width: a + "px",
        })
    }

＆＃13;

li {
	position:relative;
}
li a.projTitle {
    display: inline-block;
    margin: auto 15px auto 0px;
    line-height: 100px;
    height: 100px;
    overflow: hidden;
    outline: 0;
    border: 0;
    font-weight:300;
    background:#ccc;
    font-size:18px;
}
li .subtitle {
    font-size:10px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 500;
    opacity: .8;
    display: block;
    margin-left: 0px;
    line-height: 17px;
    margin-right: 0px;
    height: 100px;
    margin-bottom: 0px;
    position: absolute;
    top: 0px;
    padding-top: 83px;
    width:auto;
    background:#000;
    color:#fff;
}

＆＃13;

<html>
  <body class="work-page">
<ul>
  <li>
    <a class="css3Animate projTitle" href="work/project/index.html">The Project<span class="css3Animate subtitle">subtext span</span></a>
  </li>
  </body>
</html>

＆＃13;

Answer 1

您需要调用该函数。您可以在脚本标记中调用它，而无需在html中引用，如下面的注释所示，最好将处理程序附加到脚本标记内而不是内联

$(".css3Animate").click(function(){
    vg();;
})

或者您可以使用onclick="vg()"

来内联函数

 <a class="css3Animate projTitle" href="#" onclick="vg()">The Project<span class="css3Animate subtitle">subtext span</span></a>

请参阅jsfiddle here with it working

Answer 2

你有没有打电话给这个功能？如果我致电vg()

，我可以帮到我

＆＃13;

function vg() {
	    if ($("body").hasClass("work-page")) {
        	var a = $(".projTitle").width();
          console.log(a)
	           		$(".subtitle").css({
                width: a + "px",
            	})
              
		}
    }
    
    vg()

＆＃13;

li {
	position:relative;
}
li a.projTitle {
    display: inline-block;
    margin: auto 15px auto 0px;
    line-height: 100px;
    height: 100px;
    overflow: hidden;
    outline: 0;
    border: 0;
    font-weight:300;
    background:#ccc;
    font-size:18px;
}
li .subtitle {
    font-size:10px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 500;
    opacity: .8;
    display: block;
    margin-left: 0px;
    line-height: 17px;
    margin-right: 0px;
    height: 100px;
    margin-bottom: 0px;
    position: absolute;
    top: 0px;
    padding-top: 83px;
    width:auto;
    background:#000;
    color:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="work-page">
<ul>
  <li>
    <a class="css3Animate projTitle" href="work/project/index.html">The Project<span class="css3Animate subtitle">subtext span</span></a>
  </li>

＆＃13;

我会对你使用的代码保持警惕。

例如，如果你有更多的元素与你选择的同一个类，即projTitle，JQuery的.width()将获得数组的第一个元素，因为它按类选择（ $（＆＃39;。＆＃39; + className））将返回该类的元素数组。

如果您按ID选择某些内容，因为没有任何内容可以共享ID，您一定会得到正确的元素：）

通过Jquery更改CSS - 我的代码有什么问题？

2 个答案: