Question

我有一组元素，每个元素都是这样的：

<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>

class“getit”的显示设置为“none”。我需要“onclick = show”函数将“getit”分类div的显示设置为“block”。

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

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

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

我希望有人可以帮助我！

Answer 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();
});

FIDDLE

或者如果你只需要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>

<script type="text/javascript">
    function showit(elem) {
        $(elem).siblings(".getit").show();
    }
</script>

Answer 2

this函数中的

showit将代表窗口对象，而不是<a>代码。

使用show function声明中使用的参数名称，例如

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标记，您可以call

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

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

$(".aimg").on('click', function() {
    //other stuff
    $(this).siblings(".getit").css('display', 'block');
    //other stuff
});

Answer 3

使用链接父元素上的div.getit函数找到.find()。 <div id="55">元素。

这里的关键是将传入的事件对象（e）转换为jQuery对象，方法是将其包装在$()中 - 这样就可以使用jQuerys方便的.parent()和{{1函数。

.find()

jQuery文档有this来说明function showit(e){ $(e).parent().find('div.getit').show(); };函数 -

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

注意：如果在您的样式中使用inline，例如!important，则必须使用样式覆盖样式   display: none !important您希望.css('display', 'block !important')   功能正常

Answer 4

这样做： -

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;
}

参考 LIVE DEMO

无法获得具体类的div

4 个答案:

HTML：

JS：

CSS：