Question

这是html代码：

        <div class="magic-container">               
            <div class="input-group">
                <input type="text" class="typeahead form-control" placeholder="Select category ..." />
                <ul class="dropdown-menu" style= "margin-top: -10px !important;">
                      <li id="one"><a href="#">Sports</a></li>
                    <li role="presentation" class="divider"></li>
                      <li id="two"><a href="#">Entertainment</a></li>
                    <li role="presentation" class="divider"></li>
                      <li id="three"><a href="#">Travel</a></li>
                    <li role="presentation" class="divider"></li>
                     <li id="four"><a href="#">Business</a></li>

                      <li><a href="#"></a></li>
                </ul>

                <span class="flip">
        <a href="#" class="mirror1"> FLIP </a> 
                </span>
            </div>
       </div>
        <div class="magic-bar">
            <span id="rating-slider" class="ui-slider-range"></span>
            <span class="flip">
                <a href="#" class="mirror2"> FLIP </a>
            </span>
        </div>

点击{1}}时，我想发布FLIP，点击fc1点击镜像后，我想发帖FLIP。

以下是执行此操作的代码：

fc2

但是当我点击$(".flip").on('click', function() { $(".magic-bar").toggle(); $.ajax({ url: "invite_db.php", type: "POST", data: {"flipClick": 'fc1'}, success: function(data) { $(".articleContent").html(data); //setInterval("messageDisable()", 5000); } }); $(".magic-container").toggle(); $.ajax({ url: "invite_db.php", type: "POST", data: {"flipClick": 'fc2'}, success: function(data) { $(".articleContent").html(data); //setInterval("messageDisable()", 5000); } }); });时，两个值都会被发布，页面响应仍然相同。这里的逻辑错误是什么？

Answer 1

你的问题是你只能点击类翻转，点击了点击的锚点。

尝试：

 $(".flip a").on('click', function() {
      if($(this).hasClass('mirror1'))
      {
        $(".magic-bar").toggle(); $(".magic-container").toggle(); 
        $.ajax({
        url: "invite_db.php",
        type: "POST",
        data: {"flipClick": 'fc1'},
        success: function(data) {
        $(".articleContent").html(data);

        //setInterval("messageDisable()", 5000);
        }
        });
       }
      else
        {
            $(".magic-container").toggle(); $(".magic-bar").toggle();
            $.ajax({
            url: "invite_db.php",
            type: "POST",
            data: {"flipClick": 'fc2'},
            success: function(data) {
            $(".articleContent").html(data);
            //setInterval("messageDisable()", 5000);
        }
        });
    }
});

Answer 2

单击任何带有“flip”类的DOM对象时，您只需提交两个值。我读了你的代码：

$(".flip").on('click', function() {
    $(".magic-bar").toggle();
    $.ajax({ data: {"flipClick": 'fc1'} /* ... */);
    $(".magic-container").toggle();
    $.ajax({ data: {"flipClick": 'fc2'} /* ... */);
});

Answer 3

There is no conditional logic in your code

For instance you need to check if the closest anchor tag
of the flip click has class mirror1 or mirror2 then based
on that you will do one of the two calls and toggle

像这样的东西

$(".flip a").on('click', function() {
if($(this).hasClass('mirror1')){
}

if($(this).hasClass('mirror2')){
}
}

切换动作的jquery post值

3 个答案: