Question

Jquery部分中的两个代码块完全相同（隐藏彼此的相应形式并更改自己的背景颜色）。代码是：

＆＃13;

$(document).ready(function() {

  $('#messageForm').hide();
  $('#message').click(function() {
    $("#message").children().css("background-color", "");
    $("#creative").children().css("background-color", "#a6a6a6");
    $('#messageForm').show();
    $('#creativeForm').hide();

  });
  $('#creative').click(function() {
    $("#message").children().css("background-color", "#a6a6a6");
    $("#creative").children().css("background-color", "");
    $('#messageForm').hide();
    $('#creativeForm').show();

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="message">message</button>
<button id="creative">creative</button>


<div class="col-sm-12">
  <div id="creativeForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Creative</a></div>
  </div>
  <div id="messageForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Message</a></div>
  </div>
</div>

＆＃13;

Answer 1

使用一个单击处理程序，为两个元素设置默认值，然后覆盖单击元素的默认值（this）：

$('#creative, #message').click(function() {
  $("#creative, #message").css("background-color", "#a6a6a6");
  $("#creativeForm, #messageForm").hide();

  $(this).css("background-color", "");
  $('#' + this.id + 'Form').show();
});

（请注意，您的按钮元素没有任何子元素。）

<强>段：

$(document).ready(function() {

  $('#messageForm').hide();

  $('#creative, #message').click(function() {
    $("#creative, #message").css("background-color", "#a6a6a6");
    $("#creativeForm, #messageForm").hide();

    $(this).css("background-color", "");
    $('#' + this.id + 'Form').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="message">message</button>
<button id="creative">creative</button>


<div class="col-sm-12">
  <div id="creativeForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Creative</a></div>
  </div>
  <div id="messageForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Message</a></div>
  </div>
</div>

Answer 2

稍微更优雅的JS解决方案：

＆＃13;

df$C <- sapply(
    Reduce(
        function(x, y){
            if (x[[1]] == -1) { -1 } else if (x[[2]] == -1 & y[[1]] == -1) { -1 } else { 0 }
        }, 
        Map(c, df$A, df$B), right = TRUE, accumulate = TRUE), 
    `[`, 1)

df
#>          date  A  B  C
#> 1  11/24/2016  0 -1 -1
#> 2  11/23/2016 -1 -1 -1
#> 3  11/22/2016  0 -1 -1
#> 4  11/21/2016  0 -1 -1
#> 5  11/18/2016 -1 -1 -1
#> 6  11/17/2016 -1 -1 -1
#> 7  11/16/2016 -1 -1 -1
#> 8  11/15/2016 -1 -1 -1
#> 9  11/14/2016 -1 -1 -1
#> 10 11/11/2016 -1 -1 -1
#> 11 11/10/2016  0 -1  0
#> 12  11/9/2016  0 -1  0

＆＃13;

$(function(){

  var $forms = $("#creativeForm, #messageForm")
        .hide(),
      $buttons = $("#creative, #message")
        .css("background-color", "grey")
        .click(function(){
          $buttons.css("background-color", "grey");
          $forms.hide();
          $(this).css("background-color", "green");
          $('#' + this.id + 'Form').show();
        });
    
});

＆＃13;

但你可以在CSS中完成所有这些 （肯定更优雅）......

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button id="message">message</button>
<button id="creative">creative</button>

<div class="col-sm-12">
  <div id="creativeForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Creative</a></div>
  </div>
  <div id="messageForm">
    <textarea name="" class="form-control" cols="" rows=""></textarea>
    <div class="clear10"></div>
    <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Message</a></div>
  </div>
</div>

＆＃13;

label[for=message],
label[for=creative] {
  display: inline-block;
  background: #eee;
  padding: 10px;
}

#messageForm,
#creativeForm {
  display: none;
}

#message,
#creative {
  visibility: hidden;
  position: absolute;
  top: -100%
}

#message:checked~label[for=message],
#creative:checked~label[for=creative] {
  background:green;
}

#message:checked~#messageForm,
#creative:checked~#creativeForm {
  display: block;
}

＆＃13;

N.B如果您希望其中一个表单默认可见，只需预先选择相应的<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-sm-12"> <input type="radio" name="showForm" id="message" /> <input type="radio" name="showForm" id="creative" /> <label for="message">message</label> <label for="creative">creative</label> <div id="creativeForm"> <textarea name="" class="form-control" cols="" rows=""></textarea> <div class="clear10"></div> <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Creative</a></div> </div> <div id="messageForm"> <textarea name="" class="form-control" cols="" rows=""></textarea> <div class="clear10"></div> <div class="col-sm-12"><a href="#" class="btn_compaign_repot col-sm-12" style="height:50px; line-height:45px;">Send Message</a></div> </div> </div>即可。 EG：input。此外，如果您的表单已提交但返回错误，则很容易重新建立活动表单和值。

Answer 3

至少在js方面，由于每个click函数都在有效地做同样的事情，你可以将它抽象到它自己的函数中，它接受一些变量。我也没有在你的HTML中看到“创意”和“消息”ID ...它们是否也应该是“creativeForm”和“messageForm”？

function swapShowHide(show, hide) {
    $(show).show().children().css( "background-color", "" );
    $(hide).hide().children().css( "background-color", "#a6a6a6" );
}

$('#creativeForm').click(swapShowHide.bind('#creativeForm', '#messageForm');
$('#messageForm').click(swapShowHide.bind('#messageForm', '#creativeForm');

这个jquery脚本可以写得更优雅吗？

3 个答案: