Question

我遇到了一个我似乎无法解决的问题。代码工作得很好，但我还需要一个功能。

我正在使用jQuery一次返回一个搜索结果（多次搜索而不重新加载页面）。但是，我需要用户能够在不离开页面的情况下关闭他们不想要的搜索结果并丢失其他结果。

代码由

组成

isbn.tpl ：输入isbn数字搜索
ajax.php ：获取结果，返回结果：
ajax.tpl ：显示内部的结果 isbn.tpl

我很确定这段代码需要在ajax.tpl中。我需要每一行都有一个“X”来关闭单个搜索结果。其余的结果仍然存在。所以，ajax.php生成一个以“isbn_”开头的随机字符串，我在某种情况下使用了ajax.tpl。然后，代码可以使用该唯一ID关闭任何内容。

但是，我不知道这是否是最好的方法，而且我不知道该怎么做。

isbn.tpl：

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="ajax.php" name="searchISBN" id="searchForm"> 
    <input type="text" name="isbn" placeholder="Search..." />
    <input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>

<form name="buyback" method="post" action="buy.php">
        <table id="result" class="search">
            <tr><td>
                <strong>Title</strong>
            </td><td>
                <strong>Author</strong>
            </td><td>
                <strong>ISBN</strong>
            </td><td>
                <strong>Price</strong>
            </td><td>
                <strong>Wholesale</strong>
            </td>
            </tr>
        </table>

        <br><br>

        <input name="doCalc" type="submit" value="Calculate">
        &nbsp;
        <input name="doCancel" type="submit" value="Cancel">

</form>

{literal}
<script>
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault(); 

// get some values from elements on the page:
var $form = $( this ),
$term_input = $form.find('input[name="isbn"]'),
term = $term_input.val(),
//term = "isbn",
url = $form.attr( 'action' );
    $.post( url, { doSearch: "Search", isbn: term } ,
        function( data ) {
            var content = $( data );

          $( "#result" ).append( content );
      }
    );
    $term_input.val('');
});

</script>
{/literal}

ajax.php（截断）：

/**
* Create random string for id="$string" in ajax
* This way, ajax can remove individual search results
* without reloading the page.
**/
$n = rand(10e16, 10e20);
$string = base_convert($n, 10, 36);
$string = "isbn_" . $string;


$smarty->assign('doSearch', $doSearch);
$smarty->assign('details', $details);
$smarty->assign('price', $price);
$smarty->assign('wholesale', $wholesale);
$smarty->assign('userWhole', $userWhole);
$smarty->assign('userPrice', $userPrice);
$smarty->assign('isbn', $isbn);
$smarty->assign('page', $page);
$smarty->assign('rate', $rate);
$smarty->assign('wrate', $wrate);
$smarty->assign('title', $title);
$smarty->assign('author', $author);
$smarty->assign('msg', $msg);
$smarty->assign('string', $string);
$smarty->display('ajax.tpl');

ajax.tpl：

{if $doSearch == "Search"}
        {if $price != NULL}
            <tr class="{$string}"><td>
                {$title}
            </td><td>
                {$author}
            </td><td>
                {$isbn}
            </td><td>
                <input type="text" name="{$isbn}" size="3" value="{$userPrice}"><br>
            </td><td>
                {$userWhole}
            </td></tr>
        {/if}
{/if}

感谢您的帮助!!

Answer 1

使用CSS类名（和/或ID）是一种很容易识别数据的好方法。

然后，您可以使用jQuery隐藏结果中不需要的项目。

如果某个元素上有一个“isbn_xxxxxx”类，例如TR，您可以将其删除：$("isbn_xxxxxx").remove()，或隐藏它：$("isbn_xxxxxx").hide()。

有很多方法可以连接事件，但您可以轻松地将其作为onclick事件进行内联。

美丽的是，使用类名允许您对事物进行分组。你可以有多个类用于不同的目的，jQuery可以很容易地用很少的代码来操作整个事物。

编辑：

<a href="javascript://" onclick="$('.{$string}').remove()">X</a>

Answer 2

尝试添加ajax.tpl：

<td><a href="javascript:" class="close_search">Close Search</a></td>

然后是jQuery：

$('#result').delegate('.close_search', 'click', function() {
  $(this).closest('tr').hide();
});

jQuery / AJAX追加搜索结果 - 如何只清除一个结果？

2 个答案: