Question

我对这个问题失去了理智。没有任何形式的jQuery选择器似乎可以动态查找链接上方的任何元素。我试图访问链接上方的元素并隐藏它。使用parent()，prev()，before()，closest()等内容。将显示一个非null对象，但它不会响应hide()方法。

<div class="row">
    <div class="col-xs-5">
        <div id="test_fields">
            <li id="test_input" class="string input optional stringish">
                 <label class="label" for="test_input">Ingredient name</label>
                 <input type="text" name="test_input" value="afsfasf" id="test_input">
             </li>
       </div>
       <input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
     <a href="javascript:void(0)" id="test_link" css_class="small" onclick="javascript:remove_fields(this)">Remove Ingredient</a>
        </div>
   </div>

function remove_fields(link) 
{
   $(link).prev("input[type=hidden]").val('1'); // this doesn't work

    var divToHide = $(link).prev('div');

    $(divToHide).hide() // this doesn't work
    //$('#test_fields').hide(); //this works
}

Answer 1

您可以尝试 .closest（）和 .find（）

function remove_fields(link) {
   $(link).closest('div[class^="col-xs"]').find("input[type=hidden]").val('1'); 

    var div_to_hide = $(link).closest('div[class^="col-xs"]').find('#test_fields');

    $(div_to_hide).hide();
    //$('#test_fields').hide(); //this works
}

Answer 2

尝试更换以下链接：

<a href="javascript:void(0)" id="test_link" css_class="small" onclick="javascript:remove_fields($(this))">Remove Ingredient</a>

我不确定。但也许这就是问题所在。因为我记得我以前遇到过“这个”的问题，当我替换它时，它就完成了这项工作。

Answer 3

您无法更改隐藏的输入＆＃34;值＆＃34;使用.val()进行归因。你需要使用：

$(link).prev("input[type=hidden]").attr('value', '1');

由于我不确定你想对这个输入做些什么，我只是让它像这样。

.prev() fn在结构中仅包含一个前一个元素。由于input是<a>的前一个元素，因此您无法选择div。例如，您可以使用.siblings()。

$(link).siblings('div').hide();

Answer 4

如果你破坏了代码，它会变得更容易。

首先，我抓住了＆＃39; Link＆＃39;，从中抓住了最近的div，然后我拿起了输入。

我没有对您的代码进行太多更改。

＆＃13;

function remove_fields(link) 
{
    var $link =$(link);

    var $divToHide = $link.closest('div');
  
    $divToHide.find("input[type='hidden']").val('1');

    $divToHide.hide()
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
    <div class="col-xs-5">
        <div id="test_fields">
            <li id="test_input" class="string input optional stringish">
                 <label class="label" for="test_input">Ingredient name</label>
                 <input type="text" name="test_input" value="afsfasf" id="test_input">
             </li>
       </div>
       <input type="hidden" id="recipe_recipe_ingredients_attributes_0__destroy" name="recipe[recipe_ingredients_attributes][0][_destroy]">
     <a href="javascript:void(0)" id="test_link" css_class="small" onclick="javascript:remove_fields(this)">Remove Ingredient</a>
        </div>
   </div>

＆＃13;

无法选择并隐藏任何先前的元素

4 个答案: