使用 Jquery 遍历类答案

【问题标题】：traversing classes using Jquery使用 Jquery 遍历类
【发布时间】：2023-11-30 12:11:02
【问题描述】：

我在使用 Jquery 方面是全新的，这实际上是我使用它的第一个真正项目，但我遇到了一些麻烦。这是我的 HTML：编辑：好的，我充实了代码，并包含了调用函数的位置。

 <tr><th scope="row"><?php echo $box_name[$i] ?></th>
            <td>

            <div class="parent_div">
                <div><strong>Select an image</strong></div>
                <p><?php $this->_addDropDown( $box[$i].'_option', array( 'default' => 'Default', 'custom_image' => 'Custom Image') ); ?></p>


                <div class="upload_container">
                    <div>Upload a new image: <a href="" id="upload_button" class="thickbox upload_file">Upload File</a></div>
                    <?php $this->_addHidden( $box[$i] ); ?>
                    <?php $this->_addDefaultHidden( 'default_'.$box[$i] ); ?>


                    <?php $box_url = ( ! empty( $wp_theme_options[$box[$i]] ) ) ? $wp_theme_options[$box[$i]] : $wp_theme_options['default_'.$box[$i]]; ?>
                    <?php if ( ! empty( $box_url ) ) : ?>
                        <?php $box_path = iThemesFileUtility::get_file_from_url( $box_url ); ?>
                        <?php if ( ! is_wp_error( $box_path ) ) : ?>
                            <?php $box_thumb = iThemesFileUtility::resize_image( $box_path, $this->_options['box_preview_width'], $this->_options['box_preview_height'], true ); ?>
                            <?php if ( ! is_wp_error( $box_thumb ) ) : ?>
                                <a href="<?php echo $box_url; ?>" target="_blank"><img id="image_thumbnail" src="<?php echo $box_thumb['url']; ?>" /></a>
                <?php endif; ?>         
                </div>
            </div>

            </td>

    </tr>


<?php endfor; ?>

我目前正在尝试做的事情是这样的。

function refreshImageBoxOptions(id) {
 if($("#this_item" + id).attr("value") == 'default') {
   $(this).parents(".parent_div").find(".child_div").slideUp();
 }
 else if($("#this_item" + id).attr("value") == 'something_else') {
   $(this).parents(".parent_div").find(".child_div").slideDown();
 }
}

如果我删掉一些代码，我可以得到 $(".parent_div").slideUp();和 $(".child_div").slideUp();工作得很好。只有当我尝试使用 $(this).parents(".parent_div").find(".child_div").slideUp();我有问题。

我浏览过这个网站和许多其他网站，我想我只需要一双全新的眼睛来看看我是否在这里设置了错误。

这是调用函数的地方。

$(document).ready(
    function(){

        $(".child_div").hide();

            $("#left_option").change(
            function(e) {
                refreshImageBoxOptions("box_left");
                ;

            }
        );
        $("#middle_option").change(
            function(e) {
                refreshImageBoxOptions("box_middle");

            }
        );
        $("#right_option").change(
            function(e) {
                refreshImageBoxOptions("box_right");

            }
        );

}
);
}) (jQuery);

【问题讨论】：

什么是 $("#this_item")。能把整个html贴上来吗？

标签： jquery parent-child traversal

【解决方案1】：

听起来您的上下文不正确。函数内部的“this”指的是触发事件的元素，但我们无法确定它是什么。

你能告诉我调用这个函数的上下文吗？例如，“this”上下文是什么？如果您可以粘贴实际调用这些函数的 js，那将有所帮助。

您确定当时的“this”是 div.parent_div 的子项吗？

【讨论】：

到目前为止，它看起来好像是最接近的。如果我使用 $(".parent").find(".child").slideUp();或 $(".parent").find(".child").slideDown();它工作得很好，看来我的问题确实与 $(this) 不是指我虽然它指的是什么有关。
在你的情况下，这不是你想的那样。你真的需要重构你的代码。就目前而言，说实话有点像噩梦。您始终可以将 this 上下文传递给 refreshImageBoxOptions 函数。其他要查看的内容是 .call 和 .apply。但他们是另一天

【解决方案2】：

也许改变这个：

$(this).parents(".parent_div").find(".child_div")

到这里：

$(this).parents(".parent_div").children(".child_div")

在这里猜测，因为我不确定this 的来源 - 祝你好运。

【讨论】：

.find 搜索了所有的.children

【解决方案3】：

好的，所以我想通了。当我的函数被调用时，我没有将 this 传递给函数，所以它不知道“this”是什么。

$("#option").change(
  function(e) {
     refreshImageBoxOptions(this,"box_left");
   }
 );



function refreshImageBoxOptions(current,id) {
 if($("#" + id + "_option").attr("value") == 'default') {
  $(current).parents(".parent").find(".child").slideUp();
 else if($("#" + id + "_option").attr("value") == 'custom_image') {
  $(current).parents(".parent").find(".child").slideDown();
 }
}

感谢您提出的所有好主意！

【讨论】：