Question

HTML

div id="picksItem1" class="browser-content-item" onclick="navigate('https://ddg.gg',$(this).attr('id'))">
     <div class="browser-content-item-frame"></div>
</div>

JQuery的

function navigate(link,item) {
    $(item).children('.browser-content-item-frame').css("width", ($(window).width() / 2) + 80 + "px");
    $(item).children('.browser-content-item-frame').css("height", "320px");

}

Full Context（点击“编辑精选”部分下的缩略图预览）

没有报告任何错误，但没有任何反应。记录$（item）.children会返回有关它为空的消息。

Answer 1

您没有在onclick函数中传递该项，而是传递字符串（id）。

变化

navigate('https://ddg.gg',$(this).attr('id'))

到

navigate('https://ddg.gg',$(this))

关于adeneo的评论，确实一个更好的方法是添加一个事件监听器

function navigate() {
    var url = $(this).attr("data-href"); //get your url from the div object
    $(this).children('.browser-content-item-frame').css("width", ($(window).width() / 2) + 80 + "px");
    $(this).children('.browser-content-item-frame').css("height", "320px");

}

$("#picksItem1").click(navigate);

.browser-content-item-frame {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-href="https://ddg.gg" id="picksItem1" class="browser-content-item" >
     <div class="browser-content-item-frame">click me</div>
</div>

Answer 2

因为你知道div的#id，所以不需要将jQuery函数传递给你的自定义函数：

<div id="picksItem1" class="browser-content-item" onclick="navigate('https://ddg.gg','#picksItem1')">

在你的＆＃34; picksItem＆＃34; div的。但更好的解决方案是添加一个“点击”按钮。事件监听器内幕你的JS，而不是在你的html中定义它。

然后你只有一个功能，可以正确使用this。您可以在link属性上存储自定义data-link=''值，并在事件监听器中访问它。

无法让JQuery的.children（）选择器工作

2 个答案: