0

我有一组元素，每个元素看起来像这样：

<div class="maindiv">
  <div id="55">
    <a class="aimg" onclick="showit(this);return false;">
      <img src="myjpg.jpg"/>
    </a>
    <div class="someclass"></div>
    <div class="getit"></div>
  </div>
 </div>

“getit”类的显示设置为“无”。我需要“onclick=show”函数将“getit”分类的 div 的显示放到“block”中。

我在“showit()”函数中尝试了以下内容：

$(this).parent().find('.getit:first').css('display', 'block');

但它不起作用......

我希望这里有人可以帮助我！

4

4 回答 4

1

删除 onclick 处理程序，因为内联 javascript 通常不是最好的解决方案，而是阻止单击处理程序中的默认操作。

<div class="maindiv">
  <div id="55">
    <a class="aimg">
      <img src="myjpg.jpg"/>
    </a>
    <div class="someclass"></div>
    <div class="getit">dsdadsa</div>
  </div>
</div>​​​

然后找到具有正确班级的兄弟姐妹并展示它。

$(".aimg")​.on('click', function(e) {
    e.preventDefault();
    $(this).siblings(".getit").show();
})​;​

小提琴

或者，如果您只需要具有 onclick 功能（这是不必要的）：

<div class="maindiv">
  <div id="55">
    <a class="aimg" onclick="showit(this);return false;">
      <img src="myjpg.jpg"/>
    </a>
    <div class="someclass"></div>
    <div class="getit">dsdadsa</div>
  </div>
 </div>

​&lt;script type="text/javascript"​​​​​​​​​​​​​​​​​​​​​​​​​​&gt;
    function showit(elem) {
        $(elem).siblings(".getit").show();
    }
</script>
于 2012-07-22T20:01:35.250 回答
1

this在showit函数中将表示窗口对象而不是<a>标签。

使用显示函数声明中使用的参数名称，例如

function showit(element){
    //other stuff
    $(element).parent().find('.getit:first').css('display', 'block');
    //other stuff
}

或者

function showit(){
    //other stuff
    $(arguments[0]).parent().find('.getit:first').css('display', 'block');
    //other stuff
}

要在不更改功能this的情况下用作标签，您可以调用<a>showit

<a class="aimg" onclick="showit.call(this);return false;">

您也可以将事件处理程序绑定到元素，而不必乱用属性

$(".aimg")​.on('click', function() {
    //other stuff
    $(this).siblings(".getit").css('display', 'block');
    //other stuff
})​;​
于 2012-07-22T20:08:13.677 回答
0

在 links 父元素上找到div.getitusing函数。元素.find()。<div id="55">

这里的关键是通过将传入的e事件对象（$().parent().find()

function showit(e){
  $(e).parent().find('div.getit').show();
};

jQuery 文档对这个函数有这样的说法.show()——

匹配的元素将立即显示，没有动画。这大致相当于调用.css('display', 'block')，除了显示属性恢复到最初的状态。如果一个元素的显示值为inline，则隐藏并显示，它将再次内联显示。

注意：如果!important在您的样式中使用，例如，如果您希望正确运行display: none !important，则有必要覆盖样式 using .css('display', 'block !important').show()

于 2012-07-22T19:51:42.770 回答
0

这样做： -

HTML：

<div class="maindiv">
  <div id="55">
    <a class="aimg">
      <img src="http://www.gravatar.com/avatar/cfda66988653015c6791d5da11ebbc2c?s=32&d=identicon&r=PG"/>
    </a>
    <div class="someclass"></div>
    <div class="getit"></div>
  </div>
 </div>​

JS：

$('.aimg').one('click', function() {
    $(this).parent().find('.getit:first').css('display', 'block');
});

CSS：

.getit {
    display: none;
    border: 1px solid;
    width: 50px;
    height: 50px;
}​

参考现场演示

于 2012-07-22T20:01:18.103 回答