jQuery click on id by based on data id-CodePudding

I have options with data-id and some tabs with ids. I need to simulate the click option data-id to tab id. This is just an example of code. The real code is done but I cant find a solution to simulate this click.

EDITED: so in the final, there will be a drop-down with some options and tabs. when I click on the first item in the drop-down then opens tab one. when click on option two it needs to open tab two etc. I have data ids on options and ids on tabs. data needs to find id and simulate click.

jQuery('.dropdown-content span').on("click", function(){
       /* here i need help */
        jQuery('data-id').find('same-id like data-id').click();
    });
    
/* just exapmle to open contet */
jQuery('[id^="content"]').on('click', function(){
 jQuery('.content',this).addClass('active');
});

.dropdown-content span{
position:relative;
  cursor:pointer;
}

.tabs {
position:relative;
display:flex;
flex-direction:row;
margin-top:50px;
}

.tab {
padding:20px;
display:block;
text-align:center;
}

.content {
display:none;
}

.active {
 display:block
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <p>Numbers:</p>
</div>
<div >
    <div id="tabDropdown" >
        <span data-id="content1">1</span>
        <span data-id="content2">2</span>
        <span data-id="content3">3</span>
     </div>
</div>


<div >
    <div  id="content1">1
      <span >some content</span>
    </div>
    <div  id="content2">2
      <span >some content</span>
    </div>
    <div  id="content3">3
      <span >some content</span>
    </div>
</div>

CodePudding user response：

Sandi, thanks for updating your question and providing more details.

I believe what you're looking for is the attr(...) method. See it in action below.

First we use $(this) to select the currently clicked element.

Then to extract the value of its data-id attribute we do the following: const dataAttrVal = $(this).attr('data-id')

and finally we build the "id selector" by prepending a #: jQuery('#' dataAttrVal).click()

jQuery('.dropdown-content span').on("click", function(){
  // In this context "this" refers to the currently clicked element

  // To extract data from an attribute usually you use the "attr" method
  // like this:
  const dataAttrVal = $(this).attr('data-id');  
  
  jQuery('#'   dataAttrVal).click();
});
    
/* just an example to open content*/
jQuery('[id^="content"]').on('click', function(){
 jQuery('.content',this).addClass('active');
});

#tabDropdown span {
  background-color: grey;
  width: 100px;
  padding: 10px;
  cursor: pointer;
}
.dropdown-content span{
position:relative;
  cursor:pointer;
}

.tabs {
position:relative;
display:flex;
flex-direction:row;
margin-top:50px;
}

.tab {
padding:20px;
display:block;
text-align:center;
}

.content {
display:none;
background-color: green;
}

.active {
 display:block
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <p>Numbers:</p>
</div>
<div >
    <div id="tabDropdown" >
        <span data-id="content1">1</span>
        <span data-id="content2">2</span>
        <span data-id="content3">3</span>
     </div>
</div>


<div >
    <div  id="content1">Tab 1
      <span >some content</span>
    </div>
    <div  id="content2">Tab 2
      <span >some content</span>
    </div>
    <div  id="content3">Tab 3
      <span >some content</span>
    </div>
</div>