Question

我有一个带有两个输入字段的div，我想在使用jquery填充两个字段时再次显示此div。这两个文件的同一个div显示下一个数据。这个过程一直持续到条件不错。

＆＃13;

std::index_sequence_for

＆＃13;

#include <tuple>
#include <sstream>
#include <iostream>

template <typename ... TL>
struct TemplatedType
 { std::tuple<TL...> t; };

void myHelper2 (std::istream &)
 { }

template <typename ... TS>
void myHelper2 (std::istream &, char const, TS && ...);

template <typename T, typename ... TS>
void myHelper2 (std::istream &, T &, TS && ...);

template <typename ... TS>
void myHelper2 (std::istream & is, std::string & s, char const & delim,
                TS && ... ts)
 {
   std::getline(is, s, delim);

   myHelper2(is, std::forward<TS>(ts)...);
 }

template <typename ... TS>
void myHelper2 (std::istream & is, char const ch, TS && ... ts)
 {
   char ch2;

   is >> ch2;

   // check if `ch` == `ch2`? exception otherwise?

   myHelper2(is, std::forward<TS>(ts)...);
 }

template <typename T, typename ... TS>
void myHelper2 (std::istream & is, T & t, TS && ... ts)
 {
   is >> t;

   myHelper2(is, std::forward<TS>(ts)...);
 }

template <typename ... TL, std::size_t ... IL>
void myHelper1 (std::istream & is,
                TemplatedType<TL...> const & sp,
                std::index_sequence<IL...> const &)
 { myHelper2(is, std::get<IL>(sp.t)...); }

template <typename ... TL>
std::istream & operator>> (std::istream & is,
                           TemplatedType<TL...> const & sp)
 {
   myHelper1(is, sp, std::index_sequence_for<TL...>{});

   return is;
 }


template <typename ... TL>
TemplatedType<TL...> mySplit (TL && ... al)
 { return { std::forward_as_tuple(al...) }; }

int main ()
 {
   std::istringstream iss("alpha:=10/50.1");

   std::string x;
   int y{};
   double z{};

   iss >> mySplit(x, ':', '=', y, '/', z);

   std::cout << "- x: " << x << std::endl;  // print alpha
   std::cout << "- y: " << y << std::endl;  // print 10
   std::cout << "- z: " << z << std::endl;  // print 50.1
 }

＆＃13;

Answer 1

将jQuery clone(true)功能与append()一起使用。 true参数也克隆了添加的函数。请注意，在这种情况下您无法使用id=""，因为id必须是唯一的。

$('.med, .pon').blur (function () {

  //get input-values
  var input1 = $(this).parent ().find ('.med').val ();
  var input2 = $(this).parent ().find ('.pon').val ();

  //check if both values not empty
  if (input1 != '' && input2 != '') {
  
    //clone div and reset inputs.
    var new_div = $(this).parent ().clone (true);
        new_div.find ('.med').val ('');
        new_div.find ('.pon').val ('');
  
    //append clone to body
    $('body').append (new_div);
  
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="btn-group form-inline medicine_fields">
  <label>Medicine</label>
  <input type="text" list="medicines" name="medicines" class="form-control med" />
  <datalist id="medicines">
    <option value="">--select or write--</option>
    <option value="abc">abc</option>
    <option value="abc">dec</option>
  </datalist>
  <label style="margin-left:20px">Potency</label>
  <input type="text" list="potency" class="form-control pon" />
  <datalist id="potency">
    <option value="">--select or write--</option>
    <option value="abc">abc</option>
  </datalist>
</div>

Answer 2

将输入的ID更改为class=""，以便您可以在同一页面上拥有多个输入。将事件侦听器绑定到文档（或将包装所有字段的某个父元素）。并使用以下JavaScript：

$(document).on('blur', '.med, .pon', function(e) {
    var triggerParent = $(this).closest('[id^="medicine_fields"]'),
        input1 = triggerParent.find(".med").val(),
        input2 = triggerParent.find(".pon").val();

    if(input1 != '' && input2 != ''){
        var parent = $(this).parents('form'), // change this to the wrapping element where the new fields should be.
            count = parent.find('[id^="medicine_fields"]').length,
            html = $("#medicine_fields").clone().attr('id', 'medicine_fields_'+(count+1));

        html.find('datalist, input').val(''); // reset values
        parent.append(html);

    }
});

jQuery的。当条件成立时，我们如何逐步多次显示相同的div

2 个答案: