jquery 返回所选按钮的ID

guykilcj  于 2023-01-08  发布在  jQuery
关注(0)|答案(2)|浏览(144)

你好,我有下面的卡,有3个可选按钮按钮.

<ul class="nav nav-tabs border-0" role="tablist" id="FlightType" onclick="SelectedFlightType()">
                                    <li class="nav-item">
                                        <button class="nav-link active" id="oneway-tab" data-bs-toggle="tab"
                                            data-bs-target="#oneway" type="button" role="tab" aria-controls="oneway"
                                            aria-selected="true">
                                            <span
                                                class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>One-way
                                        </button>
                                    </li>
                                    <li class="nav-item">
                                        <button class="nav-link" id="return-tab" data-bs-toggle="tab"
                                            data-bs-target="#return" type="button" role="tab" aria-controls="return"
                                            aria-selected="false">
                                            <span
                                                class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Return
                                        </button>
                                    </li>
                                    <li class="nav-item">
                                        <button class="nav-link" id="multiCity-tab" data-bs-toggle="tab"
                                            data-bs-target="#multiCity" type="button" role="tab"
                                            aria-controls="multiCity" aria-selected="false">
                                            <span
                                                class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Multi-city
                                        </button>
                                    </li>
                                </ul>

我有这个按钮

<input id="btnSave" class="btn btn-search" type="button" value="Search" onclick="Search();" />

当我点击按钮时,我调用Search()函数,该函数将根据ul元素中的选定按钮重定向到不同的页面。
我想返回所选按钮的Id并在Search()函数中使用它,如下所示

var value = Search()

if(value == 'option1')
{
  //do something
}
else if(value == 'option2')
{
   //do another thing
}
else
{
   // do the rest thing
}

这是我目前所尝试的

function valueFunction() {
            // var e = e || window.event;
            var e = window.event;
            e = e.target || e.srcElement;
            if (e.nodeName === 'BUTTON') {
                var ft = e.id;
                
                alert(ft);

                return e.id;
            }
        }

当我在ul元素(id为"FlightType")的onclick中调用它时,它可以正常工作

function search(){
    var value = valueFunction();
   alert(values) //undefined for first option, not responding for the other 2 options
}
var value = Search()

if (value == 'option1') {
  //do something
} else if (value == 'option2') {
  //do another thing
} else {
  // do the rest thing
}

function valueFunction() {
  // var e = e || window.event;
  var e = window.event;
  e = e.target || e.srcElement;
  if (e.nodeName === 'BUTTON') {
    var ft = e.id;

    alert(ft);

    return e.id;
  }
}
<ul class="nav nav-tabs border-0" role="tablist" id="FlightType" onclick="SelectedFlightType()">
  <li class="nav-item">
    <button class="nav-link active" id="oneway-tab" data-bs-toggle="tab" data-bs-target="#oneway" type="button" role="tab" aria-controls="oneway" aria-selected="true">
      <span class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>One-way
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" id="return-tab" data-bs-toggle="tab" data-bs-target="#return" type="button" role="tab" aria-controls="return" aria-selected="false">
      <span class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Return
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" id="multiCity-tab" data-bs-toggle="tab" data-bs-target="#multiCity" type="button" role="tab" aria-controls="multiCity" aria-selected="false">
      <span class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Multi-city
    </button>
  </li>
</ul>

<input id="btnSave" class="btn btn-search" type="button" value="Search" onclick="Search();" />

请给我指路,我被困了几个小时。

xriantvc

xriantvc1#

为什么不使用select html标签(里面有option标签,每个标签都有自己的值)?
另一方面,函数valueFunction不能返回按钮的id,因为在DOM中没有查找它们。

9rnv2umw

9rnv2umw2#

by seeing your code  i understood  you have a few buttons implemented , all having id so you can just pass that id while onlick 

  


<input id="btnSave" class="btn btn-search" type="button" value="Search" onclick="Search('btnsave');" />
// in js code
function Search(id){
if(value == id)
{
  //do something
}
else if(value == id)
{
   //do another thing
}
else
{
   // do the rest thing
}
}

相关问题