Как использовать функцию Jquery find (), чтобы получить значение при зацикливании div? - PullRequest
Новая
       37

Как использовать функцию Jquery find (), чтобы получить значение при зацикливании div?

0 голосов
/ 11 января 2020

Я получаю значение поля ввода с помощью функции Jquery find (). И она хорошо работает, когда дело доходит до l oop, как на картинке ниже loop added приходит только первое значение .

мне нужно, пока нажимает кнопку доставки , мне нужно получить значение внутри текстового поля (Trackid). Вот то, что я пробовал

Jquery

  $('.mybtn').click(function () {

            var sa = $(this).closest(".main");
            var tid = sa.find(".tid").val();
            var mid = $(this).data("mid")
          alert("trackid:"+tid+"\nmid:"+mid);
});

Просмотр 

  @foreach (var group in Model.GroupBy(o=>o.orderid))  
     {

<div class="card text-center main" style="margin-bottom:24px;margin-top:24px">
  <div class="card-header ">
<button type="button" class="btn btn-success float-left orderid" data-oid="@group.Key">@group.Key</button>
  </div>
   @foreach(var i in group)
        {

  <div class="card-body">
        <div class="row">
            <div class="col-sm">
                <h6>Customer:@i.name</h6>
            <h6>Address:
                @i.address</h6>
            <h6>Contact.No:@i.mobile</h6>
                <h6>No.Of Items: @i.count</h6>
@*      <img src="@i.img" class="img-thumbnail" width="100" height="150"/>*@
                </div>
            <div class="col-sm">
                <h4>Product Name:@i.mname</h4>
                <h5><i class="fa fa-inr" aria-hidden="true"></i>@i.mrate</h5>


            </div>
            <div class="col-sm">
                @if (i.status == 0)
            {
           <h5>TrackId:</h5>
                <div><input type="text" placeholder="Tracking Number" id="tid" class="tid" /></div>
                      @*<div><button type="button" data-mid="@i.mid" class="btn btn-primary mybtn">Dispatch<i class="fa fa-bolt"></i></button></div>*@


            }
             @if (i.status == 1)
             {
            <div style="color:#ADFF2F">Dispatched</div>
                 <div>@i.trackid</div>
                    <div><i class="fa fa-check-square-o" style="color:green;font-size:24px"></i></div>
             }
            </div>
            <div class="col-sm">
                @if(i.ddate==DateTime.MinValue)
                {
                <h6>Delivery Status:Pending</h6>
                }
                else
                {
                <h6>Delivered on:@i.ddate</h6>
                }
            </div>
            </div>

        <a href="#" id="mybtn"  data-mid="@i.mid" class="btn btn-primary mybtn">Deliver</a>
  </div>

  <div class="card-footer text-muted">
    Ordered On:
  </div>
     }
     </div>
     }
        </div>
}

Как показано ниже изображение . Мне нужно поместить текстовое поле непосредственно перед кнопкой enter image description here

Ответы [ 2 ]

2 голосов
/ 11 января 2020

Вы можете получить значения, добавив родительские div: 

$('.mybtn').click(function () {
        var tid = $(this).parent().parent().find(".tid").val();
        var tid2 = $(this).parent().parent().find(".tid").eq(1).val();
        $(this).parent().html($(this).parent().html()+" "+tid2);
        var mid = $(this).data("mid")
      alert("trackid:"+tid+"\nmid:"+mid+"\ntid2:"+tid2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div><input type="text" placeholder="Tracking Number" id="tid" class="tid" /></div>
<div><input type="text" placeholder="Tracking Number" id="tid" class="tid" /></div>
                  @*<div><button type="button" data-mid="@i.mid" class="btn btn-primary mybtn">Dispatch<i class="fa fa-bolt"></i></button></div>*@
</div>
<div>
<div><input type="text" placeholder="Tracking Number" id="tid" class="tid" /></div>
                  @*<div><button type="button" data-mid="@i.mid" class="btn btn-primary mybtn">Dispatch<i class="fa fa-bolt"></i></button></div>*@
</div>
1 голос
/ 11 января 2020

Вот как я решил этот вопрос. Я просто поместил кнопку внутри одного из верхних делителей, как показано ниже 

 <div class="col-sm">
                @if(i.ddate==DateTime.MinValue)
                {
                <h6>Delivery Status:Pending</h6>
                    <a href="#" id="mybtn"  data-mid="@i.mid" class="btn btn-primary mybtn">Deliver</a>
                }

Jquery

 $('.mybtn').click(function () {
        var prev = $(this).parent().prev().find('input[type=text]');
        var val = $(prev).val();
        alert(val);
    })
...